Twitter Bootstrap佈局「均勻地」包裝「視口大小

我試圖使用Twitter Bootstrap創建一個響應式佈局。有一個「網格」圖像（100x100），我想顯示1,2或4寬的行。我在「.container-fluid」中使用「.row」，然後用span3來包含行內的每個項目。Twitter Bootstrap佈局「均勻地」包裝「視口大小

<div class="container-fluid"> 
    <div class="row"> 
      <div class="span3 product"><img src="//placehold.it/100x100"></div> 
      <div class="span3 product"><img src="//placehold.it/100x100"></div> 

      <div class="span3 product"><img src="//placehold.it/100x100"></div> 
      <div class="span3 product"><img src="//placehold.it/100x100"></div> 
    </div> 
    <div class="row"> 
      <div class="span3 product clearfix"><img src="//placehold.it/100x100"></div> 
      <div class="span3 product"><img src="//placehold.it/100x100"></div> 

      <div class="span3 product"><img src="//placehold.it/100x100"></div> 
      <div class="span3 product"><img src="//placehold.it/100x100"></div> 
    </div> 
</div>

問題是，當瀏覽器調整到一定寬度時，佈局變化不均勻。例如，當視口寬度在769像素和795像素之間時，我得到的行數爲3個項目，下一行包含1個項目。我寧願有「甚至」2或4個項目的行。 See a demo on Bootply。

Bootstrap開箱即用，還是我需要自定義視口計算才能獲得此佈局？

來源

2013-04-25 ZimSystem

769px畢竟跨度達到100％的寬度。這是你的問題。我相信沒有任何東西可以避免這種行爲，你必須使用CSS來做一些工作。 – Pigueiras 2013-04-25 15:57:21

我不知道我是否可以使用@media查詢做到這一點？ – ZimSystem 2013-04-29 10:23:01

你可以用@media查詢來做到這一點，但它不會跟隨網格。你也有一個選擇，生活在邊緣並嘗試Bootstrap 3，可以爲小布局設置跨度。 – Pigueiras 2013-04-29 12:47:09

將.row div的類更改爲.row-fluid。

這樣做可以讓4個項目顯示在一行中，或者只有一個如果您沿着某個點向下縮小窗口。它永遠不會做連續3件物品。

來源

2013-05-03 23:46:52 vijrox

我確實使用.row-fluid和一些@media查詢來獲得可接受的解決方案：http://bootply.com/60782 – ZimSystem 2013-05-06 19:51:33

@Skelly這真的很棒！ – vijrox 2013-05-07 18:45:48

爲什麼不在代碼中間刪除部分並讓瀏覽器處理佈局？這樣可以使物品正確堆放，也可以指定最小寬度以確保不會太小。

將您平鋪的物品包裝成一排意味着您的物品將始終在新的一排上創建一箇中斷，並將其移除，這樣可以使佈局不均勻的物品浮起。

來源

2013-05-05 23:07:24

改變行的類別，以行流體，像Vijay Ramamurthy說。

或者使用同位素插件，以適應您的畫廊，只要你想：http://isotope.metafizzy.co/

來源

2013-05-05 23:32:26

Twitter Bootstrap佈局「均勻地」包裝「視口大小

回答

相關問題