引导网格系统：重置垂直空间

Question

我正在尝试使用 Bootstrap 创建响应式新闻源页面。移动版没有问题，如下图所示。

当屏幕变大时会出现问题，我想在两个单独的列中显示元素。当两列中的两个顶部元素中的一个在垂直方向上大于另一个时，第三个元素将被向下推，如第二张图像所示。目标是去除 A 和 C 之间的垂直空间。

在一个大行中使用两个不同的行（代表两列）是不可行的，因为元素的顺序很重要，在移动版和桌面版中一样。

目前每个元素都具有类 'col-xs-12 col-sm-6'。

完整代码见 JSFiddle：https://jsfiddle.net/4v40x5a3/

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

手机版示例（无问题）：

桌面版示例（垂直空间问题）：

Answer 1

如果订单很重要并且无法提供解决方案（如@AlexG 提供的解决方案），那么我建议使用出色的Isotope/masonry plugin。 我在完全相同的上下文中使用它。

下载，包含它，然后添加以下代码：

HTML：

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

..并在您的 scripts.js 或正文关闭标记之前：

// init isotope layout
$isotopeContainer   =   jQuery('div.container > div.row');
$isotopeContainer.isotope({
    masonry: {
        columnWidth: '.item'
    }
});

..在 CSS 中：

您可以考虑为移动视图的列元素定义宽度 - 否则它们可能会以不同的宽度显示。 （见this question）

@media (max-width: 991.9999px) {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        width: 100%
    }
}

另外，如果您使用引导程序的可折叠功能：

// update isotope layout
jQuery('div.container').find('div.tools > a.collapse').on('click.collapse.data-api', function (event) {
    setTimeout(function() {
        jQuery('div.container > div.row').isotope( 'layout');
    }, 350);
});

对我来说就像一个魅力，如果您需要进一步的帮助，请告诉我..

Answer 2

不要忘记您可以将行放入列中。假设您总共有 6 个项目。您只需将前半部分分成左列，后半部分分成右列。您可能遇到的唯一问题是某一列比另一列高很多，这可能是由于内容面板过多造成的。

您也可以简单地限制内容的高度。并在单独的页面上显示完整的文章

<div class="col-xs-12 col-sm-6">
    <div class="row">
        3 items here
    </div>
</div>

<div class="col-xs-12 col-sm-6">
    <div class="row">
        3 items here 
    </div>
</div>

Answer 3

.pull-left 和 .pull-right 将根据屏幕尺寸自动适当地修复它们。

Answer 4

我一直在处理同样的问题。 James Cazetta 的同位素/砌体解决方案将起作用。但这是我做的一个 Javascript/jQuery hack。似乎工作。

“content-main”相当于问题中的“A”div。 “content-extra”相当于问题中的“B”div。

 var bottom_div_changed = false;
 function fix_bottom_div() {
     if (window.innerWidth > 991) { // Replace 991 with desired screen size
         var $el = $('#content-main');
         var bottom = $el.position().top + $el.outerHeight(true);
         var $el = $('#content-extra');
         var top = $el.position().top;
         var diff = top - bottom;
         if (diff > 0) { // If you want more margin, use number bigger than 0.
             $el.css("margin-top", -diff);
             bottom_div_changed = true;
         };
     } else if (bottom_div_changed == true) { 
         // This can happen if the screen is resized to less than 991.
         var $el = $('#content-extra');
         $el.css("margin-top", 0);
     }
 };
 $(window).resize(function () {
     fix_bottom_div();
 });
 $(window).load(function() {
     fix_bottom_div();
 });