bootstrap：響應span12中的四個span3縮略圖

我們在span8 -container中堆積了一個span12 - 並嘗試將四個縮略圖放在一行中。可惜的是最後的<li>打破了下一行，雖然屏幕尺寸可以讓所有四個縮略圖合適連續。bootstrap：響應span12中的四個span3縮略圖

與像6X span2其他組合同樣的行爲......

我建立一個小型的小提琴顯示此行爲： http://jsfiddle.net/PnWjT/

任何建議如何解決這一問題？

來源

2012-02-21 Seybsen

佈局的問題在於你不適當地堆疊引導類，這就是爲什麼你的佈局不能按照你想要的方式行事。

藉此例如：

<div class="container"> 
    <div class="container-fluid"> .. </div> 
</div>

在這裏，你正試圖以層疊流體div容器，.container-fluid，一個固定的容器專區內，.container，從而抵消.container-fluid股利。這兩個遏制div旨在用於封裝你想要的佈局，而不是彼此堆疊，所以只能使用一個。

另一個問題與堆棧如下：

<div class="span8"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
       ......

在這裏，你是一個span8專區內格（在.row-fluid容器內寬度100％）堆疊span12 DIV（內.row-fluid寬度65.812％），因此您的內容被推向右側，因爲您的span12 div溢出了較小的容器span8 div，並且由於它不適當調整以調整更改大小。您應該將span div相應地疊放到它們的寬度上，例如， span12/2 = span6, span4*2 = span8, span5 + span5 = span10等...

這是一個demo與正確的堆棧返工。請注意，除非您創建自己的課程，否則邊欄上的span4 div以及span8,span4 + span8 = span12上的內容不能超過span12。

來源

2012-02-22 03:32:16

_Nesting流體網格有點不同：嵌套列的數量不需要匹配父。相反，您的列在每個級別重置，因爲每行佔用父列的100％._它在[bootstrap-docs]（http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem）或者我在這裏錯過了什麼？ – Seybsen 2012-02-22 07:31:28

@Seybsen列在每個級別重置，這意味着一旦你開始調整你的瀏覽器的大小，每行開始佔用父寬度的100％，但是當瀏覽器是全屏時，它們仍然容易受到父母寬度的影響。這就是讓他們「流暢」的原因。 – 2012-02-22 10:55:23

@AndresIlich我從中得到的是，在流暢的佈局中，每個級別需要加起來12個。這是正確的嗎？ – JonWells 2012-10-01 11:37:07

bootstrap：響應span12中的四個span3縮略圖

回答

相關問題