html - cluster - 引導堆疊行中的差距




suse cluster (2)

我正在構建一個Bootstrap 3網格,最終將成為一個組合頁面。 在下面的bootply中,在第一個例子中,你可以看到它在我的bootply中完美地從6堆棧到4堆棧到3 堆棧

然而,在第二個例子中,在同一個bootply中,有一個項目,其中項目的瓷磚更長,並在堆疊時導致網格中的空隙。

什麼是最好的引導友好的解決方案? 任何幫助非常感謝。


我連續兩個面板也有同樣的問題。

我沒有發現任何CSS hack,所以我給了兩個面板一個same-height類,我用這個JS代碼。

boxes = $(".same-height");
maxHeight = Math.max.apply(Math, boxes.map(function () {
    return $(this).height()
}).get());
boxes.height(maxHeight);

這是一個BootPly鏈接,使用上面的代碼: http//www.bootply.com/622XyQ0oH5

當然,你必須適應你的CSS規則,我想避免空白。


有幾種方法來處理這個問題:

  1. 給你的投資組合的所有元素一定的高度。
  2. 使用磚石之類的東西來動態地將元素“適合”到可用空間中。
  3. 使用響應類和clearfix,如網格部分的標題Responsive列重置下的文檔中所述。
  4. 使用jQuery動態調整列高度。

如果您的內容是動態生成的,因此您不知道哪些元素的內容會更長,並且針對不同的斷點設置了不同的佈局,則響應式類的方法可能是一個難以適應的問題。 我使用一個小竅門。 在網格中的每個元素後,我添加一個div,我可以應用一個迷你clearfix來使用媒體查詢。 這是額外的標記,但它很好地解決了這個問題,並允許我有可讀和可維護的標記,同時避免使用JavaScript來調整佈局。 這是一個使用你的標記的例子:

更新了Bootply

<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-body">
                <a href="#">
                    <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
                </a>
            </div>
            <div class="panel-footer">
                This is text
            </div>  
        </div> 
    </div>
    <div class="clear"></div> <!--Here's the added div after every element-->
  ....
</div> <!--/.portfolio.row-->

CSS:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

如果你更喜歡jQuery路線(同樣,這假設你已經添加了一個類“投資組合”到包含你的投資組合元素的行,以便更容易的定位):

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});




twitter-bootstrap-3