Bootstrap 3 - 連續超過12列

我遇到了一種情況，我要求不要限制連續的列數，因爲可能會將多個內容塊從管理員的地方添加到該區域。Bootstrap 3 - 連續超過12列

默認情況下，BS3的行爲告訴12列div不要浮動，這會導致它們越過較小的浮動div頂部。所以我寫了一個覆蓋作爲我的系統的類，並認爲我會分享以防其他人遇到問題。

如果任何人有更好的主意或建議，我會喜歡覺得我不是黑客Bootstrap ...但這是我如何解決它。

  /* col-xs float fix for large column groups */ 
  .large-group .col-xs-12 { 
    float: left;  
  } 

  /* col-sm float fix for large column groups */  
  @media (min-width: 768px) {  
    .large-group .col-sm-12 {  
      float: left;  
    }  
  } 

  /* col-md float fix for large column groups */  
  @media (min-width: 992px) {  
    .large-group .col-md-12 {  
      float: left;  
    }  
  } 

  /* col-lg float fix for large column groups */  
  @media (min-width: 1200px) { 
    .large-group .col-lg-12 {  
      float: left;  
    }  
  }

<div class="container"> 
  <div class="row large-group" style="background-color:#ebebeb;">  
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>  
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>  
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>  
  </div>  
</div>

來源

2014-10-31 asleep

把你的代碼放在「代碼」中 – LorDex 2014-10-31 16:26:50

引導被用於12-COL用法制成。

如果您想要有更多的列，您需要藉助Bootstrap Less變量（see here）定義自定義響應網格。您將主要需要更改這些變量：

@grid-columns：網格中的列數。
@grid-gutter-width列之間填充。分爲左右兩半。

來源

2014-10-31 16:25:32 zessx

如果我只需要一個大小爲18的網格用於特定的標記但是保持原樣呢？ – ppumkin 2015-02-24 12:38:34

你需要手動去做，我猜，Bootstrap有它自己的侷限性。但你仍然可以保留一個12列的模板：首先使用'.col-2'，你將得到6列。然後，每列被分成'.col-4'元素（= 3列）。因此你得到3 * 6 = 18列（相同的大小）。 – zessx 2015-02-24 14:42:35

謝謝。我發現，即使它的12列，我可以添加超過12列而無需定義新行。它將把columne換成新的一行。我不知道你可以做到這一點，但這對我來說足夠好，因爲將列大小更改爲18可能適用於我的顯示器，但不適用於手機，平板電腦或電視機。因此，如果我們使用引導程序，這將適合屏幕空間，我認爲在這種情況下，12的硬編碼網格是無關緊要的。我只是把它定義爲'col-lg-1'，即使我有100個div。 BootStrap將它排列在包裝尺寸中。 – ppumkin 2015-02-24 14:46:22

如果您需要更大的靈活性和響應能力與大量的網格，您可以使用死簡單電網https://github.com/mourner/dead-simple-grid，也儘量減少在電網利用媒體查詢，並讓與

max-width:100%; 
 
float:left;

流

來源

2014-10-31 16:35:30

這沒有什麼錯在.row使用更超過12個單位爲，而實際上引導文檔狀態：

「如果超過12列被放置在單個行中，每一組額外的列的將作爲一個單元，換到一個新行」

也有在該演示文檔的例子爲什麼這個「列換行」在必要：https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping。可以在單個.row.標籤中包含更多12個設備，只需記住您可能需要使用響應式重置。 12個單位是視覺行的限制（水平跨過視口），但不一定是.row div，它只是一組列。

瞭解更多關於Bootstrap grid以及爲什麼more than 12 in a row is often necessary。

來源

2015-06-25 11:29:04 ZimSystem

Bootstrap 3 - 連續超過12列

回答

相關問題