如何在Bootstrap 3中創建5個相等的列？

我正在創建一個包含10個容器的選擇鏈接。我想要的是將它們分成5列。現在我的問題是我想擴大列的寬度。意思是我父母行沒有container類。如何在Bootstrap 3中創建5個相等的列？

這裏是我的示例代碼：

<div id="categories-selections"> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat1.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat2.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat3.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat4.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat5.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat6.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat7.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat8.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat9.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-2 no-padding"> 
     <img src="public/images/cat10.png" class="img-responsive" /> 
    </div> 

</div>

這裏的應該是什麼樣的輸出：

這裏就是我有：

這是所有球員，我希望你可以幫我。

這裏的樣品小提琴： https://jsfiddle.net/mk7bdyey/

來源

2015-11-20 Jerielle

可以請你共享實時鏈接或演示？這將是緩解，也請多描述一點。你想要像第一個圖像，你有像第二個圖像的結構？ –

您應該在全寬度部分使用'.container-fluid'。這個問題 - http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap涵蓋20％寬度的列。 –

是的，在我目前的設置中，我想出了第二個圖像的輸出。 – Jerielle

你可以只創建一個全新的列一起

.col-xs-15, 
.col-sm-15, 
.col-md-15, 
.col-lg-15 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 10px; 
    padding-left: 10px; 
}

接下來，你需要在不同的媒體查詢的情況下確定的新類的寬度。

.col-xs-15 { 
    width: 20%; 
    float: left; 
} 
@media (min-width: 768px) { 
.col-sm-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 992px) { 
    .col-md-15 { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 1200px) { 
    .col-lg-15 { 
     width: 20%; 
     float: left; 
    } 
}

那麼你可以使用這樣

<div class="row"> 
    <div class="col-md-15 col-sm-3"> 
    ... 
    </div> 
</div>

來源

2015-11-20 08:22:22 NooBskie

從左調整填充和右按您的要求爲div在你給id="categories-selections"。你可以把在線的CSS像style="padding-left:30px; padding-right:30px;"

來源

2015-11-20 07:36:32

好的，謝謝我會嘗試。我也在我的問題中包含了小提琴。 – Jerielle

如何在Bootstrap 3中創建5個相等的列？

回答

相關問題