堆叠自举列垂直和水平彼此相邻

Question

我想像这样展示我的专栏

代码

<div class="row">
  <div id="id-orders-stats" class="col-md-6 col-sm-6">
  </div>
  <div class="col-md-6 col-sm-6 stats-box">
    <div id="id-time-tab">
      <ul class="nav nav-pills nav-justified nav-prima">
        <li><a href="#" type="Daily" class="agraphType" data-toggle="tab">Daily</a>
        </li>
        <li><a href="#" type="Weekly" class="agraphType" data-toggle="tab">Weekly</a>
        </li>
        <li><a href="#" type="Monthly" class="agraphType" data-toggle="tab">Monthly</a>
        </li>
        <li class="active"><a href="#" class="agraphType" type="Quarterly" data-toggle="tab">Quarterly</a>
        </li>
        <li><a href="#" type="Yearly" class="agraphType" data-toggle="tab">Yearly</a>
        </li>
      </ul>
    </div>
    <div id="id-sales-pie">
    </div>
  </div>
</div>
<div class="row">
  <div id="id-channel-stats" class="col-md-6 col-sm-6 stats-box ">
  </div>
  <div class="col-md-6 col-sm-6 stats-box">
    <div id="id-sales-line">
    </div>
  </div>
</div>

我如何实现这一目标？

我已经查看了javascript解决方案和css解决方案，但它无法正常工作。请帮助

Answer 1

问题1 - 容器元素：＃3和＃4小部件与＃1和＃2小部件分开。 .row类的css将清除前一行中的浮点数，从而创建您正在观察的空格。

解决方案：将所有小部件放在同一个包含的元素中。

问题2 - 浮点数：由于窗口小部件的高度变化以及浮动文件在文档流中的呈现方式，您可能仍然会出现垂直空白问题。

解决方案1：使用CSS Columns并让您的窗口小部件对垂直重新流动

解决方案2：使用Javascript来布局小部件。类似于Masonry。

Answer 2

这非常简单。 Bootstrap适用于分为12的网格。您希望第一列成为页面的一半，这意味着您可以这样做：

 <div class="col-md-6"></div>

其他两个项目占据了页面的四分之一，因此您添加了类：

<div class="col-md-3"></div>

您可以在Bootstrap homepage上找到所有这些内容。 这是解决方案的小提琴：http://jsfiddle.net/zkreewdt/

编辑通过对行中的前两个div（1和2）进行Bundeling，意味着该行将采用最大元素的高度，并且其下方的行将自动对齐。我更新了小提琴。请检查