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的Grid Template指南，这没关系：

两列有两个嵌套列

根据文档，嵌套很简单 - 只需在现有列中放置一行列。这为您提供了两个从桌面开始并扩展到大型桌面的列，在较大的列中还有两个（相等的宽度）。

在移动设备尺寸，平板电脑和平板电脑上，这些列及其嵌套列将叠加。

但是，引导.row是有意义的，即为了对齐内容而应用负余量。如果您不介意排水沟，或者能够自行调整列以解决这个问题，那么为嵌套列添加.row容器毫无意义。

Answer 2

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

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

2 个答案:

两列有两个嵌套列