我们如何在bootstrap的帮助下创建列的动态布局？

Question

我试图在twitter bootstrap的帮助下制作动态列布局。所有黄色块都在for循环中生成

实施例

<div class="container">

<div class="col-lg-4">
Sidebar
</div>
<div class="col-lg-8">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>

Answer 1

您缺少行元素：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
        Sidebar
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-4">1</div>
        <div class="col-sm-4">2</div>
        <div class="col-sm-4">3</div>
      </div>
      <div class="row">
        <div class="col-sm-4">4</div>
        <div class="col-sm-4">5</div>
        <div class="col-sm-4">6</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">7</div>
    <div class="col-sm-3">8</div>
    <div class="col-sm-3">9</div>
    <div class="col-sm-3">10</div>
  </div>
</div>

看看at this demo bootply