3

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

面板 3 遮挡了面板 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上看到问题。

有什么想法吗？

4

1 回答 1

5

更新 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">

水平高于 1200 像素：<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 上的文档是错误的。

于 2013-08-25T21:14:52.663 回答