2016-09-22 108 views
0

實施引導3列設計時,列之間的間距不均勻,因爲bootstrap css使用左右padding = 15px定義col-md-4。Bootstrap 3列不均勻間距

因此,中間的列獲得雙重填充,因此間距爲30px,而不是15px。

下面是一張顯示我的意思的圖。有沒有什麼辦法可以實現等間距,即使在我們切換到移動設備尺寸後,間距仍然存在?有

類似的東西

.col-md-4 { padding-left: 15px; padding-right: 15px; } 
.col-md-4:first-child { padding-left: 15px; padding-right: 0px; } 
.col-md-4:last-child { padding-left: 0px; padding-right: 15px; } 

將在桌面模式下工作得很好,但在移動響應模式,左欄將缺少右填充,右列將缺少左填充

enter image description here

回答

0
.col-md-4:nth-child(2) {padding-left: 7.5px;padding-right: 7.5px;} 

這將是更適當的方式來爲所有這些樹列填充相同的填充,或者如果你想只有相同的填充nd並不重要,如果它是30px,你可以刪除列以外的行,這是不好的方式,或者你可以把一個.col-md-12列在你的列之外

+0

然而,當然,在智能手機模式下,所有這些盒子垂直對齊,只有左側和右側盒子的padding = 15,但中間盒子的padding = 7.5,不等於 – monstro

+0

在智能手機中,您可以更換色譜柱,只需添加col-xs-12或col-sm-12到你的列,並且必須有相同的填充 –