bootstrap網格列分成不同的行，每個第二行分割成不同的列，並在中心

Question

我開始使用引導網格，並試圖讓這個佈局準備就緒。[！[enter image description here] [1]] [1]

我有點困惑有關如何將三個主要的列分成獨立的部分，所以我可以放置相應的文本/圖像作爲圖中所示

我開始創建一個基本的佈局，但我我不能把它弄到正確的位置：

<div class="row" style="border: 1px solid;"> 
    <div class="col-xs-4"> 
     <div class="col-xs-12 col-md-offset-4"> 
      XXX 
     </div> 
     <div class="col-xs-12 "> 
      <div class="col-xs-12 "> 
       first column second 
      </div> 
      <!--<div class="col-xs-12 "> 
       first column second 
      </div>--> 
     </div> 

    </div> 

    <div class="col-xs-4" style="border: 1px solid;"> 
     <div class="col-xs-12 "> 
      second column first 
     </div> 
     <div class="col-xs-12 "> 
      second column second 
     </div> 

    </div> 

    <div class="col-xs-4" style="border: 1px solid;"> 
     <div class="col-xs-12 "> 
      third column first 
     </div> 

    </div> 
</div> 

我試圖將第一列中的第一行集中起來，看起來看起來沒問題。但是，我不能將第二行分成不同的列。第二和第三列將出現類似的問題。你能給出一些關於如何獲得附加布局的指導嗎？

Answer 1

Bootstrap使用12列布局進行工作。所以，如果你想2個等於列，你需要設置每個值作爲6

使用您的示例第二列你會把

<div class="col-xs-4" style="border: 1px solid;"> 
    <div class="col-xs-6 "> 
     second column first 
    </div> 
    <div class="col-xs-6 "> 
     second column second 
    </div> 

</div> 

感謝