Bootstrap CSS----------Bootstrap 网格系统（5）
|
- UID
- 1066743
|
Bootstrap CSS----------Bootstrap 网格系统（5）
列偏移---让列居中显示
我们发现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。
在下面的实例中，我们有 <div class="col-sm-6">..</div>，我们将使用 .col-sm-offset-3 class 来居中这个 div。
代码如下：
<!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 col-sm-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>我是想要居中的列
</p>
</div>
</div>
</div>
</body>
</html>
效果如图: |
|
|
|
|
|
