带有面板显示的 Bootstrap 3 布局在小型设备上不正确

Question

使用 Bootstrap 3 调整我的布局，如下所示，但在 iPad 上没有成功（纵向）。

面板 3 遮挡了面板 1 和 2。此问题仅出现在此尺寸中。

这是一个错误？？？

<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。而不是 float:left 您应该使用 clearfix 结合视口的响应实用程序类。请参阅：http://twbs.github.io/bootstrap/css/#grid（“响应列重置”部分）。

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

更新

当所有行 div（列）都有一个 float:left 时，不会发生下面描述的重叠。

col-xs-12 和 col-sm-12 等没有浮点数。

因此，要解决您的问题，请在第三列添加 float:left：<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。

根据您的意愿，您必须选择您的网格类：

对于三个列/面板： 从不堆叠/始终水平：<div class="col-xs-4">

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

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

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

注意你使用相同的 id (panel-looking-info) 三次

twitter bootstrap 上的文档也显示：

<!-- 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 个 50% = 150% 的 div：

使用或不使用 boostrap 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 上的文档是错误的。