自舉行結構

Question

在Twitter Bootstrap中，默認行結構是12列寬。給定以下代碼

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-2"> 
      Hello-1 
    </div> 
    <div class="col-lg-2"> 
      Hello-2 
    </div> 
    <div class="col-lg-2"> 
      Hello-3 
    </div> 
    <div class="col-lg-2"> 
      Hello-4 
    </div> 
    <div> 
</div> 

列之間有一個默認空間量，但我希望顯示彼此更近的列。有沒有辦法用Bootstrap類來做到這一點？

Answer 1

There is three more classes. 
1- offset 
2- push 
3- pull 

offset is use for margin-left:% 
push is use for left:% 
pull is use for right:% 

，你可以用它來使你的12格來獲取和刪除它們之間的距離。

例如：從您的代碼

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-offset-2 col-lg-3"> 
      Hello-1 
    </div> 
    <div class="col-lg-2"> 
      Hello-2 
    </div> 
    <div class="col-lg-2 col-lg-pull-1 "> 
      Hello-3 
    </div> 
    <div class="col-lg-3"> 
      Hello-4 
    </div> 
    <div> 
</div> 

Answer 2

你是否想要從divs中刪除填充和邊距？ add css

.div-left {float：left; }

<div class="container"> 
    <div class="row"> 

<div class="col-md-6"> 
    <div class="div-left"> 
      Hello-1 
    </div> 
    <div class="div-left"> 
      Hello-2 
    </div> 
    <div class="div-left"> 
      Hello-3 
    </div> 
    <div class="div-left"> 
      Hello-4 
    </div> 
    <div> 
</div> 

繼承人例如http://www.bootply.com/126135

http://getbootstrap.com/examples/grid/希望此鏈接將幫助您需要分配電網您的div爲好。寬度將根據屏幕分辨率而有所不同。 感謝

Answer 3

這取決於有多少你想改變的差距。您可以繼續並通過網站自定義引導程序或從源代碼進行編譯。

要定製的屬性爲grid-gutter-width，默認設置爲30px;

http://getbootstrap.com/customize/

我已張貼在YouTube上的視頻如何與源（適用於Mac量身定製）做到這一點。 https://www.youtube.com/watch?v=uSkBLoz2XmU

Answer 4

更少：變量305中的行305有一個名爲@ grid-gutter-width的變量，您可以減少它：引導程序執行@ grid-gutter-width/2來計算實際列填充。

對於CSS，您必須手動編輯該文件，或者使用額外的類來覆蓋它。