Bootstrap 网格系统实例：中型和大型设备区分显示
在上个例子中，我们使用 2 个 div，并在视口宽度的中间对它们进行 50%/50% 分割：
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
但是，在大型设备上，您最后设计成 33%/66%。所以我们要做的是配置大型设备对应的列的宽度：
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
Bootstrap 在中型设备中，会查找带有 md 的class，并使用它们。在大型设备中，会查找带有 lg 的class，并使用它们。在本实例中，我们的 2 个 div 在中型设备中显示为 50%/50% ，在大型设备为 33%/66%。请查看下面的实例进行验证。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 中型和大型设备区分显示</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-md-6 col-lg-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第一列段落1
</p>
<p>第一列段落2
</p>
</div>
<div class="col-md-6 col-lg-8" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二列段落1
</p>
<p>第二列段落2
</p>
</div>
</div>
</body>
</html>
代码保存为html打开可见效果:
在手机等中型屏幕是两列分别 50% 50%的布局
在大屏幕中是两列分别是33%/66%的布局 |
