自舉列包裝 - 不規則行爲

我目前正在使用Bootstrap遇到不規則的列包裝行爲。包裝在我行中的一些列浮動到容器的頂部，而不是在前一個元素的下面。自舉列包裝 - 不規則行爲

根據引導文檔：

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

例如，我有：

<div class="container-fluid"> 

    <div class="row first"> 
    <div class="col-sm-6 col-md-3"> 
     Col 1 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 2 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 3 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     Col 4 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     Col 5 
    </div> 
    <div class="col-sm-6 col-md-4"> 
     Col 6 
    </div> 
    <div class="col-sm-12 col-md-4"> 
     Col 7 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     Panel 
    </div> 
    </div> 
</div>

最後一列是行爲我以爲會根據文檔是不正確的。當您在以下示例here中調整視口大小時，可以看到第7列對於小視口具有不規則行爲。該列似乎填充了父元素的寬度/高度。

是否有開箱即用的方法來解決這個引導？感覺好像我忽略了標記，但我現在要雙眼交叉...

來源

2016-12-05 Dustin

你是什麼意思**第7欄有不規則的行爲**？ – Aravind

第7列有'col-sm-12'類。你在徘徊什麼？ – Banzay

請查看上面問題中的jsfiddle示例並更改視口大小。這裏是鏈接：http：//jsfiddle.net/dhardin/erm8wqz6/ 你會看到，第7列採用父元素的全高/寬度。 – Dustin

我認爲你的問題與col-*-12引導類不浮動的事實有關。

您可以將float: left添加到您的第7列col-sm-12，或者您可以添加一個clearfix，然後該col只在它變成12的斷點處可見（sm）。

這樣的：

<div class="col-sm-6 col-md-4"> 
      Col 6 
     </div> 

     <div class="clearfix visible-sm"></div> 

     <div class="col-sm-12 col-md-4"> 
      Col 7 
     </div>

你可以看到this fiddle

但這樣做可能會更清潔：

<div class="col-xs-12 col-md-4 pull-left"> 
     Col 7 
    </div>

這裏是該解決方案的a demo。

重載行時可能遇到很多問題，因此通常建議儘量避免它，並將事情包裝在.rows中。

來源

2016-12-05 18:24:46 zgood

第一個解決方案效果很好！第二個解決方案似乎有一個問題，寬度不是100％的父元素（xtra小視口）。 – Dustin

@Dustin對不起，第二個解決方案需要'col-xs-12'而不是'col-sm-12'在較低的屏幕上達到100％的寬度。如果您願意使用該解決方案，我已經更新了我的答案並更新了這些更改的演示。 – zgood

自舉列包裝 - 不規則行爲

回答

相關問題