爲什麼Bootstrap行中的某些圖像出現在方格圖案中？

我正在做一個使用Bootstrap的產品頁面，大多數圖片顯示正常，但兩行底部行的最後一行用較小的屏幕尺寸顯示。爲什麼Bootstrap行中的某些圖像出現在方格圖案中？

To let you know what I mean I've included an image here.

這裏是行之一的不能工作權代碼：

<div class= "row"> 

    <div class="col-sm-6 col-md-3"> 

    <img src="images/seasonal_1.jpg"> 

    </div> 

    <div class="col-sm-6 col-md-3"> 

    <img src="images/seasonal_2.jpg"> 

    </div> 

    <div class="col-sm-6 col-md-3"> 

    <img src="images/seasonal_3.jpg"> 

    </div> 

    <div class="col-sm-6 col-md-3"> 

    <img src="images/seasonal_4.jpg"> 

    </div> 

</div>

來源

2016-12-20 Kbesh

當你有一些填充或邊框所增加元素的大小這通常發生。

網格以％爲基礎工作，所以如果你有2個元素，每個元素的寬度都等於50％，但是你添加了一些像填充或邊框那樣的東西，總共100％，元素被推送到下一行。

我的建議（因爲我沒有實際的代碼）將使用瀏覽器開發工具來查看您的樣式，以查看發生這種情況時應用的樣式。你應該能夠追查違規財產。

希望這是有用的，即使不是一個明確的答案。

來源

2016-12-20 01:24:57 Brad

嗨，謝謝你的回覆，但我已經考慮過了。在我的CSS文檔中影響它的唯一邊距/填充樣式是：.col-md-3 {margin-bottom：4em; }。即使我有其他代碼影響它，它也不能解釋爲什麼行中的前兩個圖像以及其他行很好地對齊，而該行中的最後兩張圖片是方格的，儘管我正在使用它們都是相同的代碼。 – Kbesh

爲什麼Bootstrap行中的某些圖像出現在方格圖案中？

回答

相關問題