Bootstrap網格系統：重置垂直空間

我正在嘗試使用Bootstrap創建響應性的新聞源頁面。移動版本沒有任何問題，正如您在下面的屏幕截圖中看到的那樣。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>

移動版的例子（沒有問題）：

enter image description here

桌面版本的例子（垂直空間的問題）：

來源

2015-05-08 Coding Monkeys

創建演示/向我們展示相關代碼 –

這會發生，因爲這就是網絡系統的工作原理。 –

我建議你看看[masonry]（http://masonry.desandro.com/） – maioman

上完整的文章。如果順序是重要的，一個解決方案（如提供的一個@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); 
});

工作就像在我的情況下的魅力，讓我知道如果你需要進一步的幫助..

來源

2015-05-08 13:18:48

謝謝，正是我在找的！你有任何想法是否有可能在調整窗口大小時禁用轉換？當從大屏幕尺寸移動到屏幕尺寸時，這些項目會相互顯示並在之後移動到正確的位置。這不是那麼重要，只是我想知道的一個選項是否可行？如果他們永遠不會落後於對方，那將更加美麗。非常感謝您的幫助。 –

@CodingMonkeys很高興聽到！要做到這一點，只需在您的Isotope初始化中執行以下操作。函數：'$ isotopeContainer.isotope（{transitionDuration：0，...}）;' –

不要忘記你可以把行放入列。假設你總共有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>

來源

2015-05-08 12:49:39 AlexG

左對齊和右對齊將根據屏幕大小自動修正它們。

來源

2015-05-08 13:59:44

請你舉個例子嗎？ –

我一直在處理同樣的問題。詹姆斯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(); 
});

來源

2016-01-22 13:46:10

Bootstrap網格系統：重置垂直空間

回答

相關問題