我的縮略圖不會進入多列，我做錯了什麼？

-1

所以目前我正在一個網站上工作（我使用Bootstrap 3來設計我的網站）。在主頁上，我想要製作一系列縮略圖，爲網站的不同部分提供標題和簡要說明。我已經能夠對此進行編程，但我也想讓縮略圖連續顯示在四列中，但是它會在列中彈出四行。我使用bootstrap中的classes，row和col-md-4以及我所看到的應該自動將縮略圖放入四行中。我的縮略圖不會進入多列，我做錯了什麼？

任何人都可以想到我可能做錯了什麼？如果您需要了解更多詳細信息，請提問我寫的內容。

謝謝！

來源

2014-09-03 Sebastian Hans

顯示您的代碼Cavanagh – 2014-09-03 09:23:57

您能舉一個例子，說明您在http://jsfiddle.net/上做了什麼，以便更容易地看到出現了什麼問題？ – philnash 2014-09-03 09:24:28

當然！我添加了頁面部分中使用的所有標籤。它看起來不像我的編輯器，但你應該可以使用它。謝謝！ http://jsfiddle.net/shabowow/5wpx87k1/ – 2014-09-04 05:06:21

Twitter引導程序3旨在與多種屏幕分辨率一起使用。因此，取決於屏幕的大小，內容被重構爲獲取全部可用寬度或預設寬度。

在你的情況下，你需要一行四列，我懷疑這是由於你正在查看頁面的屏幕，或容器的寬度小於md尺寸寬度（大於或等於992px - 見http://getbootstrap.com/css/#grid-options）。

因此，您可以使用較低分辨率的前綴之一（sm或xs）或增加容器的寬度。

請參閱示例小提琴 - http://jsfiddle.net/ay3oL496/ - 以瞭解屏幕分辨率如何影響各個類的各種col-類。增加預覽選項卡的寬度，並調整各個元素的大小。

//更新下面的代碼示例

感謝您的代碼示例 - 現在的問題是清楚的。請參閱 - http://jsfiddle.net/x6vqrck9/1/處的解決方案。

您遇到的問題是由於在每列之後添加了<div class="row">語法 - 實際上您每行都有一列。另外，您正在使用col-md-4 - 這將導致每行3列（有12個網格列，並且您使用4來顯示每個元素）。

結構應

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3">Content here</div> 
     <div class="col-md-3">Content here</div> 
     <div class="col-md-3">Content here</div> 
     <div class="col-md-3">Content here</div> 
    </div> 
    <div class="row">Other site content here</div> 
</div>

在小提琴的代碼藏漢糾正這些問題，加入jQuery和引導庫。

來源

2014-09-03 10:07:40 Kami

我試着玩不同的課程，但沒有運氣。我的筆記本也有1280x800分辨率。雖然謝謝！ – 2014-09-04 05:07:30

@SebastianHans感謝代碼示例，我現在可以看到問題了。答案已更新。 – Kami 2014-09-04 09:43:59

我的縮略圖不會進入多列，我做錯了什麼？

回答

相關問題