如何使用col-md- *

Question

在bootstrap 3.0的一行中添加5個圖像，而不使用col-md- *在bootstrap 3.0中添加5個圖像。 bootstrap有12個網格。但我只放5張圖片。怎麼做.. ？

Answer 1

你剛剛回答了你自己的問題，用引導程序的col-md- *你不能沒有任何差距。由於有12列，並且您想要顯示5張圖像，因此會留下2列。

要麼放6張圖片（我猜你不想這樣做），或者改變col-md-2 css規則使寬度爲20％（我不推薦），或者創建你自己的css規則浮動：左，寬度：20％（我推薦這個），但與其他CSS規則不同寬度的屏幕（根據您的需要）。

Answer 2

首先抱歉。不知道發佈鏈接和教程是不允許的。 現在我相信我有點解決你的問題。 我爲5列創建了一個網格。它們在800px處摺疊成100％寬度（可以輕鬆更改）。

.grid-container{ 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    box-sizing: border-box; 
 
} 
 
.grid-row { 
 
    margin-left: inherit; 
 
    margin-right: inherit; 
 
} 
 
/*-- our cleafix hack -- */ 
 
.grid-row:before, 
 
.grid-row:after { 
 
    content:""; 
 
    display: table ; 
 
    clear:both; 
 
} 
 

 

 
.col-1{ width: 20%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-1 { 
 
    margin-left: 20%; 
 
    float: left; 
 
    padding: 5px; 
 

 
} 
 
.col-offset-2 { 
 
    margin-left: 40%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-3 { 
 
    margin-left: 60%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-4 { 
 
    margin-left: 80%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 

 
@media all and (max-width:800px){ 
 
    .col-1 { width: 80%; 
 
    margin-left: 10%; 
 
    margin-right: auto; 
 
     padding: 15px; 
 
    } 
 
    .grid-container { 
 
     width: 100%; 
 
    } 
 
    img { 
 
     display: block; 
 
     margin:0 auto; 
 
    } 
 

 
} 
 
img { 
 
    display: block; 
 
    margin:0 auto; 
 
}

<div class="grid-container"> 
 
    <div class="grid-row"> 
 
     <div class="col-offset-2 col-1"><img src="http://placehold.it/600x150" alt="" class="img-responsive"></div> 
 
     <div class="col-1"><img src="http://placehold.it/600x150" alt="" class="img-responsive"></div> 
 

 
    </div> 
 
</div>

我真的不知道，如果這就是你一直在尋找的東西。