如何使用Bootstrap嵌套列網格

Question

我試圖實現bootstrap嵌套列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;
}

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>

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

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

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>