我可以在另一个col内部使用Bootstrap col吗？

Question

我仍然是Bootstrap的新手,我正在试图弄清楚什么是正确的,什么不是.有一个col内部是否可以接受col？在下面的示例中,我有一个表单,我想要适合屏幕的一半.我还希望某些形状控制元素为半宽,而其他全宽.这是正确的方法,还是有更好的方法？

示例代码:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<section class="row">
  <div class="container">
    <div class="col-xs-12 text-center">
      <h1>Contact</h1>
    </div>
    <form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal">
      <div class="form-group form-group-lg">
        <div class="col-sm-12">
          <input class="form-control" type="text" placeholder="name">
        </div>
      </div>
      <div class="form-group form-group-lg">
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="email">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="website">
        </div>
      </div>
      <button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12">Submit</button>
    </form>
  </div>
</section>

Answer 1

是的,根据Bootstrap的网格模板指南,这没关系:

两列有两个嵌套列

根据文档,嵌套很简单 - 只需在现有列中放置一行列.这为您提供了两个从桌面开始并缩放到大型桌面的列,在较大的列中有另外两个(相等的宽度).

在移动设备大小,平板电脑和平板电脑上,这些列及其嵌套列将叠加.

但是,Bootstrap有一个重点.row,即应用负边距以对齐内容.如果你不介意排水沟,或者能够自己调整列以解决这个问题,那么.row为嵌套列添加容器是没有意义的.

Answer 2

您可以根据需要将列嵌套为多个级别,但它们通常应位于一行内.行具有负边距以考虑列上的填充,因此如果列嵌套在列之间而没有行,则会弄乱页面的对齐.