将bootstrap网格划分为子网格

Question

我在针对所有设备的web应用程序中使用了bootstrap。我已将主行划分为三列(例如：第二行)。现在，我想将每一列划分为另一组每列12列(如第三行)，并对其进行划分。在将主列划分为子列时，是否需要考虑此处的屏幕尺寸？如果是这样，那么它的网格规范是什么，导致这里生成的列具有不同的列宽？或者我不得不使用table标签来达到这样的目的。

​

​

Answer 1

Bootstrap grid非常适合处理嵌套。也遵循与您期望的父级相同的响应式设计模式。

以便将孩子嵌套在引导程序中。在列中使用行。

例如：

<div class="container">
  <div class="row">
    <div class="col-md-8">

    </div>
    <div class="col-md-8">
      <!-- Creating a child here and divide col-8 into 2 parts. -->
      <div class="row">

        <!-- Note that for bootstrap all the rows are always 12 columns --> 
        <div class="col-md-6">

        </div>
        <div class="col-md-6">

        </div>
      </div>
    </div>
  </div>
</div>

请记住，bootstrap将所有行视为12列。

Answer 2

尽管我认为@kishanio的答案比不言自明--我还是决定为你进一步分析一下。

​

​

另外，我认为这段代码将提供您上面描述的内容

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>
<div class="row"> **this one tricky? naaa**
    <div class="col-md-4"> **split page in 3's** Whats 1/3rd of 12 .. 12:3 = 4
        <div class="row"> **only use first 3rd of page**
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
        </div>
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

​