将引导网格划分为子网格

Question

我在我的网络应用程序中使用了bootstrap，目标是所有设备。我将主行分为三列（例如第二行）。现在我想将每个分割列分别处理另一组12列（如第三行）并将其除以。将主列分为子列时，是否需要在此处考虑屏幕大小？如果是这样，那么它的网格规格会导致此处生成的列具有不同的列宽？或者我必须为此目的使用表格标签。

Answer 1

Bootstrap网格非常适合处理嵌套。 ＆安培;也遵循与父母期望的相同的响应式设计模式。

为了将孩子嵌套在bootstrap中。在列内使用行。

e.g。

<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>