引導3佈局面板顯示在小設備上不正確

Question

使用引導3調整我的佈局，如下圖所示，但iPad（縱向）無法成功。

Panel 3 obscured Panel 1 & 2.此問題僅出現在此大小中。

這是一個bug？

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-looking-info"> 
        <h4> 
         Panel 1</h4> 
       </a><small>Panel heading description</small> 
      </div> 
      <div class="panel-body in" id="panel-looking-info"> 
       Panel body 1 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-looking-info"> 
        <h4> 
         Panel 2</h4> 
       </a><small>Panel heading description</small> 
      </div> 
      <div class="panel-body in" id="panel-looking-info"> 
       Panel body 2 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-looking-info"> 
        <h4> 
         Panel 3</h4> 
       </a><small>Panel heading description</small> 
      </div> 
      <div class="panel-body in" id="panel-looking-info"> 
       Panel body 3 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

當您調整爲小尺寸時，您可以在http://bootply.com/76904上看到問題。

對此有何想法？

Answer 1

更新2

而且讀：https://github.com/twbs/bootstrap/issues/10152#issuecomment-23247254。而不是浮動：左邊你應該使用一個清晰​​的修補程序結合視口的響應實用程序類。請參閱：http://twbs.github.io/bootstrap/css/#grid（「響應列重置」一節）。

所以在你的情況下：在第二個和第三個面板列之間添加<div class="clearfix visible-sm"></div>。

更新

如下所述，當所有的行div的（列）有一個浮動不會發生重疊：離開了。

col-xs-12和col-sm-12等沒有浮點數。

因此，要解決您的問題添加浮動：左到第三個欄：<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="float:left;">

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-looking-info"> 
        <h4> 
         Panel 1</h4> 
       </a><small>Panel heading description</small> 
      </div> 
      <div class="panel-body in" id="panel-looking-info"> 
       Panel body 1 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-looking-info"> 
        <h4> 
         Panel 2</h4> 
       </a><small>Panel heading description</small> 
      </div> 
      <div class="panel-body in" id="panel-looking-info"> 
       Panel body 2 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="float:left;"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-looking-info"> 
        <h4> 
         Panel 3</h4> 
       </a><small>Panel heading description</small> 
      </div> 
      <div class="panel-body in" id="panel-looking-info"> 
       Panel body 3 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

閱讀關於電網： http://getbootstrap.com/css/#grid或 http://bassjobsen.weblogs.fm/twitters-bootstrap-3-rc2-important-changes/（簡單的例子）

的引導CSS有4個網格（超小型，帶col-xs- ，小型帶col-sm-等）

對於每個網格的列數應該加起來最多爲12.

在你的代碼中，col-xs/col-sm加起來爲36。

根據你的意願，你必須選擇你的網格類：

三年colums /板： 切勿堆放/總水平：<div class="col-xs-4">

水平以上768px：<div class="col-sm-4">

水平以上992px ：<div class="col-md-4">

水平1200px以上：<div class="col-lg-4">

NB你用相同的ID（面板外觀-INFO）三次

在twitter上引導該文檔還顯示：

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
<div class="row"> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div 

其中COL-XS-6，使3 DIV 50％=連續150％：

檢查這些例子有或沒有自舉的CSS：

<div style="width:800px;"> 
<div style="background-color:yellow;width:50%;float:left;min-height:50px;"></div> 
<div style="background-color:orange;width:50%;float:left;min-height:50px;"></div> 
<div style="width:100%;"> 
<div style="height:150px;background-color:navy;"></div> 
</div> 
<br> 
<div width="800px"> 
<div style="background-color:yellow;width:50%;float:left;min-height:50px;"></div> 
<div style="background-color:orange;width:50%;float:left;min-height:50px;"></div> 
<div style="width:100%;position:relative;"> 
<div style="height:150px;background-color:navy;"></div> 
</div> 

其結果是：

與第二個的不同之處在於相對位置（TB網格類也添加了一個相對位置），但是在這兩種情況下元素都重疊。

原因總寬度是> 100％元素重疊並具有相同的頂部。

我不認爲這是一個錯誤。我認爲getboostrap.com上的文檔是錯誤的。