Bootstrap 网格列

2018-03-03 16:33 更新

Bootstrap有四种类型的前缀，用于为不同大小的显示创建列：

col-xs用于超小显示器（屏幕宽度<768px）
col-sm用于较小的显示器（屏幕宽度> = 768px）
col-md用于中等显示器（屏幕宽度> = 992px）
col-lg用于较大的显示器（屏幕宽度> = 1200px）

当我们指定类 col-xs-12 时，它表示元素应在额外的小屏幕上跨越所有12个可用的Bootstrap列。

让我们检查下面的标记：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <h4>Column 1</h4>
        </div>
        <div class="col-xs-12 col-sm-6">
            <h4>Column 2</h4>
        </div>
    </div>
</div>

在这段代码中，我们将col-xs-12 类用于超小显示器和类 col-sm-6 用于较小的显示器。因此，超小型显示器中的每一列将占用所有12个可用的Bootstrap列，这将显示为列的堆栈。然而在较小的显示器上，它们每个只占用6个Bootstrap列，实现两列布局。

例子

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <h4>Column 1</h4>
            </div>
            <div class="col-xs-12 col-sm-6">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
  </body>
</html>

你可以调整浏览器窗口的大小以查看动态更改。

嵌套列

我们可以在布局中的任何列中创建一组新的12个Bootstrap列，以便创建嵌套列。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col1">
            <h3>Column 1</h3>
            <!-- Nesting Starts  -->
            <div class="row">
                <div class="col-md-6 col3">
                    <h3>Column 4</h3>
                </div>
                <div class="col-md-6 col4">
                    <h3>Column 5</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 col2">
            <h3>Column 2</h3>
        </div>
    </div>
</div>
  </body>
</html>

偏移列

偏移用于增加列的左边距。

例如，如果你有一个列出现在三个Bootstrap列之间，则可以使用偏移功能。

可用于偏移的类有：

col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*

假设我们要在超小显示器中向右移动一列三个Bootstrap列，我们可以使用类“col-xs-offset-3”，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3 col1">
                <h1>Hello!</h1>
            </div>
        </div>
  </body>
</html>

此代码将产生一个跨越6个Bootstrap列的列，向右偏移三列。

居中列

我们可以使用偏移来使列居中。只需将相同数量的列放置在居中列的两侧。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                <h1 style="background:#EEE">Hello!</h1>
            </div>
        </div>
  </body>
</html>

向左拉，向右拉

诸如col-xs-pull- * 和 col-xs-push- * 等的类用于将列向左和向右移动一定数量的列。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="row">
        <div class="col-xs-9 col-xs-push-3">
            <h1>col-xs-push-3</h1>
        </div>
        <div class="col-xs-3 col-xs-pull-9">
            <h1>col-xs-pull-9</h1>
        </div>
    </div>

  </body>
</html>

注意

在代码中，col-xs-9列由三列推送，因此它向右移动。 col-xs-3列也被向左拉9列。它们似乎在浏览器上查看时已交换了其原始位置。
根据屏幕大小有push和pull类的几个变体：
col-xs-pull-*和col-xs-push-*用于超小的屏幕
col-sm-pull-*和col-sm-push-*用于较小的屏幕
col-md-pull-*和col-md-push-*用于中等的屏幕
col-lg-pull-*和col-lg-push-*用于较大的屏幕
你可以用1到12之间的整数替换*。

以上内容是否对您有帮助：

Bootstrap 网格列

例子

嵌套列

偏移列

居中列

向左拉，向右拉

注意

推荐文章

推荐教程

推荐课程