Twitter bootstrap 引导网格未按预期堆叠

我可能没有理解引导中的网格包装是如何工作的，但是在下面的代码中（为了简单起见，每个表的大部分都是动态的）。如果没有动态数据，一切都会像我预期的那样堆叠起来，但是数据（很可能永远不会是相同的）会奇怪地堆叠起来

谁能给我指出正确的方向或告诉我我做错了什么

这就是我所看到的

这就是我想看到的

我有以下代码：

        <div class="row">


            <div id="centerCol" class="col-md-3 clearfix">



<div class="col-md-6">
    <h3>Daily Site Totals</h3>
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th>Day</th>
            <th>Logins</th>
            <th>Distinct Logins</th>
            <th>Avg Min On</th>
            <th>New Accts</th>
            <th>Index Taken</th>
            <th>Reports Viewed</th>
            <th>Purchases Made</th>
        </tr>
    </table>
</div>
<div class="clearfix visible-md"></div>
<div class="col-md-6">
    <h3>Site Totals</h3>
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th>Logins</th>
            <th>Distinct Logins</th>
            <th>Avg Min On</th>
            <th>New Accts</th>
            <th>Index Taken</th>
            <th>Reports Viewed</th>
            <th>Purchases Made</th>
        </tr>

    </table>
</div>

<div class="col-md-6">
    <h3>Affiliate Totals</h3>
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th>Affiliate</th>
            <th>Logins</th>
            <th>Distinct Logins</th>
            <th>Avg Min On</th>
            <th>New Accts</th>
            <th>Index Taken</th>
            <th>Reports Viewed</th>
            <th>Purchases Made</th>
        </tr>
    </table>
</div>

<div class="col-md-6">
    <h3>Top Logins</h3>
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th>Name</th>
            <th>Logins</th>
            <th>Distinct Logins</th>
            <th>Avg Min On</th>
            <th>New Accts</th>
            <th>Index Taken</th>
            <th>Reports Viewed</th>
            <th>Purchases Made</th>
        </tr>
    </table>
</div>


<div class="col-md-6">
    <h3>Top Referring People</h3>
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th>Name</th>
            <th>Logins</th>
            <th>Distinct Logins</th>
            <th>Avg Min On</th>
            <th>New Accts</th>
            <th>Index Taken</th>
            <th>Reports Viewed</th>
            <th>Purchases Made</th>
        </tr>
    </table>
</div>


                <br clear="all">
            </div>


        </div>

每日站点总数
白天
登录名
不同登录
平均分钟
新账户
索引
查看的报告
购买
站点总数
登录名
不同登录
平均分钟
新账户
索引
查看的报告
购买
附属机构总数
使附属
登录名
不同登录
平均分钟
新账户
索引
查看的报告
购买
顶级登录
名称
登录名
不同登录
平均分钟
新账户
索引
查看的报告
购买
顶级推荐人
名称
登录名
不同登录
平均分钟
新账户
索引
查看的报告
购买

我想你可以这样安排你的代码

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Daily site totals
    </div>
    <div class="col-md-6">
      <div>
        Site Totals
      </div>

      <div>
        Affiliate Totals
      </div>
    </div>
  </div><!-- .row -->

  <div class="row">
    <div class="col-md-6">
      Top Logins
    </div>
    <div class="col-md-6">
      Top Referring People
    </div>
  </div><!-- .row -->
</div><!-- .container -->

每日站点总数
站点总数
附属机构总数
顶级登录
顶级推荐人

---

使用两个.row类来清除浮动。

另一个选项是使用两列，如下所示

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12">

                </div>
                <div class="col-xs-12">

                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12">

                </div>
                <div class="col-xs-12">

                </div>
                <div class="col-xs-12">

                </div>
            </div>
        </div>
    </div>
</div>

---

浮动就是这样工作的。我倾向于使用洗牌或砌石。我正要回答和斯凯利一样的问题。这肯定会解决问题。