跨越Bootstrap网格设计的行

Question

我在Bootstrap中使用Grid布局。

如何在此网格设计中为3行创建特定控件（比如文本区域）？

是否可以使用网格布局？

Answer 1

我没有测试过这个，但尝试这样的事情：

<div class="row">
    <div class="col-md-9">
        <div class="col-md-12">.col-md-12</div>
        <div class="col-md-12">.col-md-12</div>
        <div class="col-md-12">.col-md-12</div>
    </div>
    <div class="col-md-3">.col-md-3</div>
</div>

这使用嵌套列，如@ user3711852建议。

Answer 2

您基本上想要使用嵌套网格或表单组。

首先，将页面拆分为两列，左侧有多行，右侧只有一行。在提供的示例中，我演示了如何使用左列中的表单组来获取与图中完全相同的标签/输入。

<div class="row">

  <!-- Left Column -->
  <div class="col-sm-6">
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-3 control-label">Input 1</label>
        <div class="col-sm-9">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Input 2</label>
        <div class="col-sm-9">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Input 3</label>
        <div class="col-sm-9">
          <input type="text" class="form-control">
        </div>
      </div>
    </form>
  </div>

  <!-- Right Column -->
  <div class="col-sm-6">
    <textarea class="form-control" rows="3"></textarea>
  </div>

</div>

See this working Plnkr example

• 请注意，plnkr必须足够宽才能应用响应式布局和堆栈

如果您希望使用嵌套网格来获得相同的效果，则只需在左列内部定义一个包含行/列的新网格。