Bootstrap网格系统问题

Question

我无法理解一个简单的细节。 我只是Bootstrap的新手，所以需要帮助。

如何在没有固定高度的cols的情况下在Bootstrap中创建网格系统？

Web示例是here。

Answer 1

您可以在网格组件中嵌套网格组件，例如plunkr

 <div class="container">
  <!---Main seperation 4 cols-->
  <div class="col-sm-4">

    <div class=col-sm-12>
      <img src="//placehold.it/150x300">
    </div>
    </div>

  <!---Main seperation 8 cols-->
  <div class="col-sm-8">
    <div class="row"> 
      <div class="col-sm-3 "><img src="//placehold.it/150x100"></div>
      <div class="col-sm-3 col-sm-offset-1 "><img src="//placehold.it/150x100"></div>
      <div class="col-sm-3 col-sm-offset-1"><img src="//placehold.it/150x100"></div>
    </div>
      <div class="row" style="margin-top: 15px; margin-bottom: 15px"> 
      <div class="col-sm-3 "><img src="//placehold.it/150x100"></div>
      <div class="col-sm-3 col-sm-offset-1 "><img src="//placehold.it/150x100"></div>
      <div class="col-sm-3 col-sm-offset-1"><img src="//placehold.it/150x100"></div>
    </div>
       <div class="row" > 
      <div class="col-sm-3 "><img src="//placehold.it/150x100"></div>
      <div class="col-sm-3 col-sm-offset-1 "><img src="//placehold.it/150x100"></div>
      <div class="col-sm-3 col-sm-offset-1"><img src="//placehold.it/150x100"></div>
    </div>
  </div>

</div>