免费AI编程助手
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之间的整数替换*。
以上内容是否对您有帮助：
更多建议：