Bootstrap列與列間距相同高度

我爲站點開發前端並遇到嚴重問題。我使用bootstrap 3來使站點響應。
我使用網格功能佈局，但我需要符合以下要求：
- 列必須具有相同的高度
- 應該有列Bootstrap列與列間距相同高度

的第一個問題是通過這麼賣之間的空間。我將row設置爲overflow: hidden;，並將columns設置爲margin-bottom: -99999px; padding-bottom: 99999px;這解決了列高問題，但我無法在列的外部放置空間，因爲我使用了所有12列。（col-md-4，col-md-4，col-md-4/col-md-8，col-md-4）如果我將side margin設置爲最後一列包裝到下一行的列。
使用該列作爲容器的另一個問題是margin-bottom和padding-bottom值。我無法設置border-radius，因爲底部邊框不可見。
使用內部容器是顯而易見的。我做到了，但內部的div沒有填補可用的高度。我做了一個Codepen的例子。
我試過如下：
- 內DIV position設置爲relative/absolute與bottom: 0價值
- 設置height，min-height 100％，其中 inline/block/inline-block

我的第一選擇將是一個組合CSS解決方案，因爲移動的第一種方法，但我也會考慮任何其他解決方案。 jQuery被加載（由bootstrap的JavaScript組件所要求）並且加載了knockout。

關於這個例子。其目的是即使其內容小於可用空間，水色「面板」也必須具有相同的高度（在一排課程中）。如果您之前未使用Codepen，則可以使用編輯器/完整頁面菜單以全屏查看示例。

感謝您的任何建議。

來源

2014-02-19 Péter

-1

Twitter引導程序使用變量@ grid-gutter-width，如果要增加或更改列之間的空間，則修改此變量值，該變量用於設置所有列的左側和右側的填充。 less

來源

2014-02-19 09:08:13 Prasad

默認值爲30px，列之間沒有空格。我設置爲40px，但沒有改變。我在chrome中檢查樣式，並將此值設置爲行類的左右邊距以及列左側和右側的填充。這不會在列之間放置空間，而是放置在列的內容中。 –

Bootstrap列與列間距相同高度

回答

相關問題