Question

我正在尝试使用Bootstrap创建响应式新闻源页面。移动版本没有任何问题，您可以在下面的屏幕截图中看到。

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

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

目前每个元素都有类＆＃39; col-xs-12 col-sm-6＆＃39;。

请参阅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>

移动版示例（无问题）：

enter image description here

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

enter image description here

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

此外，如果您使用bootstrap的可折叠功能：

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

不要忘记你可以将行放入cols。假设您总共有6个项目。您只需将前半部分分为左侧col，将后半部分分为右侧col。您可能遇到的唯一问题是，一个col比另一个col高很多，可能是由太多大型内容面板引起的。

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

SimpleDateFormat sdf = new SimpleDateFormat("MM-dd-yyyy hh:mm:ss");
System.out.println("My date formatted is: " + sdf.format(timestamp));

Answer 3

.pull-left 和 .pull-right 会根据屏幕尺寸自动修正它们。

Answer 4

我一直在处理同样的问题。 James Cazetta的Isotope / Masonry解决方案将起作用。但这是我做过的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();
 });

Bootstrap网格系统：重置垂直空间

4 个答案: