特殊情况处理实例
响应式列重置---修复列高度bug
当列的高度不一样时，在设备的自适应中后面的列可能会出现重叠。如下代码:
<!DOCTYPE html>
<html>
<head>
<title>列重置--列的高度bug修复</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>这个是高度bug</h1>
<div class="row show-grid">
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
</div>
</body>
</html>
效果为：
我们可以看到 这小型sm设备中 第二列和第三列叠在一起了，这不是我们想要的效果。
甚至当第一列高度更高时，可能后面的 第二第三第四列都会叠在一起。
怎么解决这个问题呢？
官网给出了一种解决方案（使用.clearfix（清理浮动）和响应式工具class的组合）--响应式工具我们后面会详细介绍
例如这里使用 <div class="clearfix visible-sm"></div>即可解决高度bug的问题。 我们是在sm设备中所以使用visible-sm。
完整解决代码为:
<!DOCTYPE html>
<html>
<head>
<title>列重置--列的高度bug修复</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>这个是高度bug</h1>
<div class="row show-grid">
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<!-- 在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合 -->
<div class="clearfix visible-sm"></div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
<div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
</div>
</body>
</html>
效果图:
列偏移---让列居中显示
我们发现bootstrap分成12列的逻辑里 我们经常用到col-XX-6这些样式，具体左右的分配则是bootstrap框架自动来分配的位置了。比如如果我只有一列，用了col-sm-6，那么它显示的时候肯定是分配在左边的(如图)
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>列偏移--让列居中</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-sm-6 "
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是想要居中的列
</p>
</div>
</div>
</div>
</body>
</html>
我怎么能让它变成居中呢? bootstrap提供了 列偏移 的样式.col-XX-offset-* 类。
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-XX-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在小屏幕显示器上使用偏移，请使用 .col-sm-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。 |
