如何使用Bootstrap嵌套列网格

Question

我尝试过在 Bootstrap 中实现嵌套列，但这样不够响应式。我想实现完全响应式的网格系统。这是我想在 Bootstrap 网格系统中实现的效果： 这是我的 HTML 标记代码：

<div class="col-md-12 topSpace">
   <div class="col-md-3 text-center"></div>
   <div class="col-md-6 text-center">
   </div>
   <div class="col-md-3 text-center">
   </div>
</div>
<div class="md-col-6 col-centered"></div>

这是 CSS 标记语言。

.col-centered{
margin:0 auto;
}

.topSpace{
top:100px;
}

- mod geek

Answer 1

这个下面的 HTML 标记应该有效。

<div class="col-md-12">

  <div class="row">
    <div class="col-md-3">
      1
    </div>    
    <div class="col-md-6">
      2
    </div>    
    <div class="col-md-3">
      3
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      4
    </div>
  </div>

</div>

Demo: http://bootply.com/SJ3EYuxOQM

- Anoop John

Answer 2

另一种选择是@John答案的替代方案。

<div class="col-md-12">

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

    <div class="row">       
      <div class="col-md-12">
        2
      </div>
      <div class="col-md-12">
        4
      </div>
    </div>

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

</div>

在较小的屏幕宽度下，列表项的排列顺序会有所不同：

• 对于我的答案：1、2、4、3
• 对于 @john 的答案：1、2、3、4

- Can Guney Aksakalli

Answer 3

这个也可以尝试一下，

请试试吧。

<form class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-md-3">
            DIV1
        </div>
        <div class="col-md-6">
            DIV2
        </div>
        <div class="col-md-3">
            DIV3
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-3">
            DIV4
        </div>
    </div>
</form>

- Prabhat Sinha