Bootstrap 3佈局問題

我明白Bootstrap網格佈局是如何工作的，但我沒有看到如何處理這些行。Bootstrap 3佈局問題

在中等屏幕上，給定的行爲col-md-2有六列數據。當我轉移到更小的屏幕時，我想要一個col-sm-3顯示四列數據，因此col-xs-6可以將其降低到移動兩列數據。

數據從mysql中提取，因此每列的長度（以及高度）也不相同。我該如何處理排<div class="row">？由於在xs該行將爲兩列，在sm它將爲四列，並在md它將處理六列？

我試圖完全刪除行，事情沒有正確排列。有任何想法嗎？

2016-01-16 Franco Blaser

我知道有人可能會要求代碼......但爲了簡單起見，我們可以將其保留到概念上......因此，要重新說明如何適應不同列數量的bootstrap中的行類，因爲具有行類的div包裝與colum類的div作爲列div的數量如何處理行包裝..我希望我的問題是有道理的。 –

引導程序完全按照你想要的方式處理它 - 它將在較小的設備上包裝'extra'div列。因此，如果您使用的是較小的設備，則「行」這個術語有點誤導性，因爲它可能會跨越多個水平行。

您可以選擇插入一個特別明確的列之間，如果你有不同的高度，並且希望在下一個水平行的頂部排隊，如：

<div class="clearfix visible-xs-block"></div>

注意上面會插入一個因爲'visible-xs-block'包含在班級列表中，因此只能在XS設備上清除。但是，如果你的列元素高度相同，那麼這是非常好的，因爲下一行將會在前一個包裹下愉快地包裹起來。

這裏是一個helptile到的bootstrap documentation example你正在尋找：

來源

2016-01-16 20:57:45 darrylivan

它不能正常工作，因爲如果我有18列數據，它將顯示6列md然後4和2,4和2 sm而不是4,4,4,4,2 ...有道理嗎？由於原始行關閉標籤影響...所以作爲一個解決方案，我正在考慮有多個佈局，並使用CSS媒體查詢，只在正確的中斷點顯示正確的。感謝您的及時回答 –

我創建了一個Plunkr討論：https://plnkr.co/edit/VlnWhSqyKUdbPCKz4IMh?p=preview（調整看響應行爲）

<div class="row"> 
    <div class="col-md-2 col-sm-3 col-xs-6"><b>Col 1: </b>Lorem Ipsum is simply dummy...</div> 
    <div class="col-md-2 col-sm-3 col-xs-6"><b>Col 2: </b>Lorem Ipsum is simply dummy...</div> 
    <div class="col-md-2 col-sm-3 col-xs-6"><b>Col 3: </b>Lorem Ipsum is simply dummy...</div> 
    <div class="col-md-2 col-sm-3 col-xs-6"><b>Col 4: </b>Lorem Ipsum is simply dummy...</div> 
    <div class="col-md-2 col-sm-3 col-xs-6"><b>Col 5: </b>Lorem Ipsum is simply dummy...</div> 
    <div class="col-md-2 col-sm-3 col-xs-6"><b>Col 6: </b>Lorem Ipsum is simply dummy...</div> 
    </div>

我不是當然，但我認爲你的問題是關於如何將內容分發到不同的div。所以，在

MD：在6列

所有

SM：在短短的4列

XS所有內容：在短短的2列所有內容

這是第th正確的理解？如果是這樣，Bootstrap 3的網格系統無法實現這一點。

來源

2016-01-16 21:26:32 Osserspe

是的，非常好，這正是我所要求的。如果Bootstrap 3不是爲這種靈活性設計的，我想我可以有多個佈局，並使用CSS媒體查詢，只在正確的中斷點顯示正確的佈局。感謝您的及時答覆。 –

大聲思考：是的，可以按照您的描述創建多個佈局。缺點是頁面上重複的內容。此外，該解決方案不能解決核心問題：將內容從一列傳輸到另一列。也許你可以嘗試css'column-count'屬性？請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts和http://caniuse.com/#feat=multicolumn – Osserspe

Bootstrap 3佈局問題

回答

相關問題