0

我需要連續三列col3大小。我也需要它們至少分隔col2的大小。也就是說,第一列和第三列必須分別設置在容器的左側和右側,而中間的兩側將具有相等的邊距。在引導程序中安排列

Bootstrap最新版本如何實現?

+1

這是一個足夠複雜的問題,您應該發佈一些代碼,這些代碼來自您的嘗試。我可能會從'.pull-left'和'.pull-right'開始,而沒有'.container'。 – isherwood

回答

0

你可以使用(帶或不帶.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; 
    } 
} 

Bootply

+0

謝謝你的答案。當屏幕尺寸減小時,抵消中間欄可能會產生問題。同樣的問題也發生在應用50%的情況下。我需要針對所有屏幕尺寸的解決方案。 – user3008290

0

標準引導版本是一個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這不會爲你工作列構建請按照下列步驟操作:

  1. 轉到這裏http://getbootstrap.com/customize/#grid-system
  2. 變化@grid-columns至13
  3. 滾動到b然後單擊「編譯並下載」
  4. 將舊的.css和.js替換爲新下載的文件。

我希望這會有所幫助。這是獲得所需外觀的最佳方法,並確保內容列之間始終存在2列的偏移量。

注意:您可以從col-md-3 divs中刪除style屬性。他們就在那裏,所以可以看到列。