我正在使用最新版本的Twitter Bootstrap。全角列表項格柵引導3

我有以下標記：

<div class="container-fluid"> 
    <div class="row"> 
    <ul id="grid"> 
     <li class="mix dogs col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li> 
     <li class="mix cats col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li> 
     <li class="mix krakens col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li> 
     <li class="mix dogs cats col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li> 
    </ul> 
    </div> 
</div>

和輸出是不太什麼，我很期待，它增加了一個水平滾動條，也是間距不等於對第一項和最後一項。

下面是截圖： enter image description here

我想有這樣的輸出： enter image description here

是否有可能與實際電網系統刪除列表項之間的排水溝，並讓他們填寫的寬度瀏覽器？

來源

2014-02-26 agis

您是否想要將這些元素或所有元素的排水溝移除？ – Mikey

只是爲了這一套元素 – agis

enter image description here

有沒有這樣的東西.row也不會清楚裏面ul.grid和UL有邊距和填充上它。執行以下操作：

edit

對於設置了排水溝標準：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="mix dogs col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div> 
     <div class="mix cats col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div> 
     <div class="mix krakens col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div> 
     <div class="mix dogs cats col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div> 
    </div> 
</div>

對於沒有排水溝做到以下幾點：

<div class="container-fluid"> 
    <div class="row flush-col"> 
     <div class="mix dogs col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div> 
     <div class="mix cats col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div> 
     <div class="mix krakens col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div> 
     <div class="mix dogs cats col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div> 
    </div> 
</div>

新建CSS：

.row.flush-col > [class*="col-"] {padding:0;} 

.img-fluid {width:100%;}

來源

2014-02-27 01:49:48 Christina

如果您使用的是LESS，則可以更改排水溝。您必須將其設置爲您的樣式中的一列，而不是將col類添加到元素中。

請參閱使用文檔中LESS混入官方步驟：http://getbootstrap.com/css/#grid-less

來源

2014-02-26 22:31:41 jakealbaugh

全角列表項格柵引導3

回答

http://jsbin.com/getof/1/edit

相關問題