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> 

感谢