Bootstrap CSS----------Bootstrap 网格系统（4）
|
- UID
- 1066743
|
Bootstrap CSS----------Bootstrap 网格系统（4）
特殊情况处理实例
响应式列重置---修复列高度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>
效果图: |
|
|
|
|
|
