Bootstrap网格未按预期堆叠

Question

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

有人能指出我正确的方向或告诉我我做错了什么吗？

这就是我所看到的

这就是我以为我会看到的

我有以下代码：

        <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>

Answer 1

另一种选择是使用像这样的2列..

<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>

http://codeply.com/go/tHDqmM50ya

Answer 2

我认为你可以这样安排你的代码。

<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类来清除浮动。