CSS - 5等Bootstrap列

我知道這個問題已經被問了很多之前，但我的情況有點「特定」。我爲TYPO3使用了一個模板，它有一個引導內容元素，我可以告訴模板我需要多少列等，然後呈現HTML代碼。CSS - 5等Bootstrap列

正如你所看到的，我有2行每行包含5列，我希望他們使用所有剩下的空間並居中。我怎麼做？

2017-03-16 Insane

對於需要均勻間隔且不與網格線對齊的元素，網格不是正確的選擇。但是，您可以通過在包含項目的行上使用CSS彈性盒模型（也稱爲flexbox）輕鬆實現目標。

下面的CSS代碼將容器設置爲flexbox，告訴它將內容均勻分佈在所有可用空間中，並隱藏使用此方法時不需要的::after僞元素。不需要更改HTML。在不支持Flexbox的瀏覽器上（在IE 11下），所有內容都與以前一樣。

div#c1131 > .row { 
    display: flex; 
    justify-content: space-between; 
    overflow: hidden; 
} 

div#c1131 > .row::after { 
    display: none; 
}

如果瀏覽器的兼容問題，確保您驗證對caniuse或類似的服務。

來源

2017-03-16 07:58:16 Kaivosukeltaja

據我所知，Bootstrap中的默認網格有12個部分。所以，如果你想在一行中使用5列是不可能的。

您可以使用可分爲3,4和5列（60）的網格列號，也可以使用自己的CSS作爲此特例。

來源

2017-03-16 07:46:30

只需在同一個父DIV

<div class="col-lg-1"></div>

來源

2017-03-16 08:03:44

你所給出的列前加入這個網站沒有在此情況下，用CSS改變任何東西：引導有12列：所以，你可以使用2周的cols每個盒子，裏面意味着你使用了10列，兩列是免費的。這兩個列可以使用，一個在第一個框之前作爲偏移量，在最後一個框之後，您應該添加明確的修復。

來源

2017-03-16 09:03:10 besartm

CSS - 5等Bootstrap列

回答

相關問題