我可以在另一个 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>

原文由 Christian J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，根据 Bootstrap 的 网格模板 指南，这没关系：

具有两个嵌套列的两列 –

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

在移动设备尺寸、平板电脑及以下尺寸下，这些列及其嵌套列将堆叠。

但是，Bootstrap .row 有一个要点，即应用负边距以对齐内容。如果您不介意间距，或者能够自己调整列来解决这个问题，那么为嵌套列添加 .row 容器就没有意义了。您可以将 .row 类放在与 .col 相同的元素上以移除这些间距（感谢 Extragory 指出这一点）。

同样，不将列换行会导致某些属性无法正确应用，例如 --- .col 类中的 flex 属性。 .row 有 display: flex ，任何具有 flex 属性的孩子都需要应用这些属性……否则它们将被忽略。

原文由 TylerH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以根据需要将列嵌套到任意多的层次，但它们通常应该在一行中。行具有负边距以说明列上的填充，因此如果您将列嵌套在列内而中间没有行，则会弄乱页面的对齐方式。

原文由 mistykristie 发布，翻译遵循 CC BY-SA 3.0 许可协议