如何使用 Bootstrap 嵌套列网格答案

【问题标题】：How To Use Bootstrap Nested Column Grid如何使用 Bootstrap 嵌套列网格
【发布时间】：2016-04-18 19:15:11
【问题描述】：

我已经尝试实现引导嵌套列 div 但这不是响应我想在 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;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

演示：http://bootply.com/SJ3EYuxOQM

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：