連續9個div，想要在每個斷點處丟失一個div，並使用引導程序

Question

我在一行中有9個div，大小相同。我正在使用最新版本的引導程序3.

我應該如何編寫代碼，以便在縮小屏幕時，在每個斷點處丟失一個div，直到屏幕爲移動大小並顯示兩個div？

當前引導程序有我相信四個斷點，我將不得不使用媒體查詢編碼我自己的額外斷點？我會怎麼做？我想我總共需要八個斷點。

Answer 1

然後只是不要使用bootstrap !!!，使用float:left來代替，並讓瀏覽器決定何時將溢出的div移動到新行。

您也可以使用display: inline-block;獲得類似的效果，同時還可以將它們（塊）作爲文本對齊的好處。

Demo

Answer 2

引導默認只具有3個或4個斷點。如果你有9列，並且想要以2結尾，那麼你需要7個，所以最好是你自己爲這些（移動優先）編寫查詢。

就我個人而言，我會用一些自定義樣式自己處理列。通過使用類似以下樣式的東西，即使刪除了一些（或者如果您不太在意向後兼容性，請使用flexbox），您最終也會得到一組填充行的列。注意：不要重寫Bootstrap的類。

.row { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.column { 
    display: table-cell; 
} 

現在你只需要一些媒體查詢，隱藏第n個孩子（將需要各種選擇器）。

Answer 3

我個人避免使用flexbox，因爲它與我的自定義指令模板不兼容。仍然可以使用引導程序3並添加樣式和自定義查詢來正確對齊。

<div class="container"> 
    <div class="row"> 
     <div id = "itemContainer" class="col-md-1"> One </div> 
     .................. 
     <div id = "itemContainer" class="col-md-1"> Six </div> 
     <div id = "itemContainer" class="col-md-1"> Seven </div> 
    </div> 
</div> 


#itemContainer { 
    height: 100px; 
    border: 1px solid red; 
    margin: 10px 10px 10px 20px; 
    min-width: 100px; 
    display: inline-block; 
} 

DEMO