我需要連續三列col3大小。我也需要它們至少分隔col2的大小。也就是說,第一列和第三列必須分別設置在容器的左側和右側,而中間的兩側將具有相等的邊距。在引導程序中安排列
Bootstrap最新版本如何實現?
我需要連續三列col3大小。我也需要它們至少分隔col2的大小。也就是說,第一列和第三列必須分別設置在容器的左側和右側,而中間的兩側將具有相等的邊距。在引導程序中安排列
Bootstrap最新版本如何實現?
你可以使用(帶或不帶.container
):
<div class="container">
<div class="col-left col-xs-12 col-md-3">LEFT</div>
<div class="col-center col-xs-12 col-md-3">CENTER</div>
<div class="col-right col-xs-12 col-md-3">RIGHT</div>
</div>
使用自定義CSS,使其工作:
@media (min-width: 992px) {
.col-left {
float: left;
}
.col-center {
position: absolute;
top: 0;
left: 50%;
margin-left: -12.5%;
}
.col-right {
float: right;
}
}
謝謝你的答案。當屏幕尺寸減小時,抵消中間欄可能會產生問題。同樣的問題也發生在應用50%的情況下。我需要針對所有屏幕尺寸的解決方案。 – user3008290
標準引導版本是一個12列設置。用3列col-XX-3和col-XX-offset-2加起來13列(3 + 2 + 3 + 2 + 3 = 13)。您需要創建一個包含13列的自定義引導程序。
要實現您的期望效果,請使用col-XX-offset-*
,其中XX
是屏幕尺寸(lg,md,sm,xs),而*
是偏移量。 col-XX-offset-*
抵消了右邊的*
。
因此,爲了得到你想要你的代碼看起來像這樣的外觀:
<div class="container">
<div class="row">
<div class="col-md-3" style="background: #333; height:250px;"></div>
<div class="col-md-3 col-md-offset-2" style="background: #666; height:250px;"></div>
<div class="col-md-3 col-md-offset-2" style="background: #999; height:250px;"></div>
</div>
</div>
同樣,除非你有你的列和偏移量加起來12要使自定義引導13這不會爲你工作列構建請按照下列步驟操作:
@grid-columns
至13我希望這會有所幫助。這是獲得所需外觀的最佳方法,並確保內容列之間始終存在2列的偏移量。
注意:您可以從col-md-3
divs中刪除style
屬性。他們就在那裏,所以可以看到列。
這是一個足夠複雜的問題,您應該發佈一些代碼,這些代碼來自您的嘗試。我可能會從'.pull-left'和'.pull-right'開始,而沒有'.container'。 – isherwood