CSS 带有面板显示的 Bootstrap 3 布局在小型设备上不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18428450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 layout with Panel display not correct on small device
提问by Minh Nguy?n
Using Bootstrap 3 to ajust my layout like below but not success on iPad (portrait).
使用 Bootstrap 3 调整我的布局，如下所示，但在 iPad（纵向）上没有成功。
Panel 3 obscured Panel 1 & 2. This problem occurs only in this size.
面板 3 遮住了面板 1 和 2。此问题仅在此尺寸中出现。
This is a bug???
这是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>
You can see problem on http://bootply.com/76904when you resize to small size.
当您调整为小尺寸时，您可以在http://bootply.com/76904上看到问题。
Any idea for this?
对此有什么想法吗？
回答by Bass Jobsen
update 2
更新 2
Also read: https://github.com/twbs/bootstrap/issues/10152#issuecomment-23247254. Instead of the float:left you should use a clearfix in combination with a responsive utility class for the viewport. See: http://twbs.github.io/bootstrap/css/#grid(section "Responsive column resets").
另请阅读：https: //github.com/twbs/bootstrap/issues/10152#issuecomment-23247254。您应该将 clearfix 与视口的响应实用程序类结合使用，而不是 float:left。请参阅：http: //twbs.github.io/bootstrap/css/#grid（“响应列重置”部分）。
So in your case: add <div class="clearfix visible-sm"></div>between the second and third panel column.
所以在你的情况下：<div class="clearfix visible-sm"></div>在第二个和第三个面板列之间添加。
update
更新
The overlap described below don't happen when all row div's (columns) have a float:left.
当所有行 div（列）都有一个 float:left 时，不会发生下面描述的重叠。
col-xs-12 and col-sm-12, etc don't have a float.
col-xs-12 和 col-sm-12 等没有浮点数。
So to fix your problem add a float:left to your third column: <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="float:left;">
因此，要解决您的问题，请在第三列中添加一个 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>
Read about the grid: http://getbootstrap.com/css/#gridor http://bassjobsen.weblogs.fm/twitters-bootstrap-3-rc2-important-changes/(easy example)
阅读有关网格的信息：http: //getbootstrap.com/css/#grid或http://bassjobsen.weblogs.fm/twitters-bootstrap-3-rc2-important-changes/（简单示例）
The bootstrap CSS has 4 grid (extra small with col-xs-, small with col-sm-etc.)
For every grid the number of columns should add up to 12.
In your code col-xs / col-sm add up to 36.
Depending on your wishes you have to choose your grid classes:
For three colums / panels:
Never stack / always horizontal: <div class="col-xs-4">
horizontal above 768px: <div class="col-sm-4">
horizontal above 992px: <div class="col-md-4">
horizontal above 1200px: <div class="col-lg-4">
NB you use the same id (panel-looking-info) three times
The docs on twitter bootstrap also show:
<!-- 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
where col-xs-6 makes 3 div of 50% = 150% in a row:
check these examples with or without 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>
The result:
The difference with the second is the position relative (the TB grid classes also add a position relative), but in both cases the elements overlap.
Cause the total width is > 100% elements overlap and have the same top.
bootstrap CSS 有 4 个网格（使用 col-xs-小，使用 col-sm-等小）
对于每个网格，列数应加起来为 12。
在您的代码中 col-xs / col-sm 加起来为 36。
根据您的意愿，您必须选择网格类：
对于三列/面板：从不堆叠/始终水平： <div class="col-xs-4">
水平高于 768 像素： <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% 元素重叠并具有相同的顶部。
I don't think this a bug. I think the docs on getboostrap.com are wrong.
我不认为这是一个错误。我认为 getboostrap.com 上的文档是错误的。
