在小型设备上,面板显示的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等没有浮动.

所以要修复你的问题,添加一个浮动:左边第三列: <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/(简单示例)

bootstrap 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个div为50%= 150%:

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