Bootstrap 網(wǎng)格列
2018-03-03 16:33 更新
Bootstrap有四種類型的前綴，用于為不同大小的顯示創(chuàng)建列：
- col-xs用于超小顯示器（屏幕寬度<768px）
- col-sm用于較小的顯示器（屏幕寬度> = 768px）
- col-md用于中等顯示器（屏幕寬度> = 992px）
- col-lg用于較大的顯示器（屏幕寬度> = 1200px）
當(dāng)我們指定類 col-xs-12 時，它表示元素應(yīng)在額外的小屏幕上跨越所有12個可用的Bootstrap列。
讓我們檢查下面的標(biāo)記：
<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列，實(shí)現(xiàn)兩列布局。
例子
<!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>你可以調(diào)整瀏覽器窗口的大小以查看動態(tài)更改。
嵌套列
我們可以在布局中的任何列中創(chuàng)建一組新的12個Bootstrap列，以便創(chuàng)建嵌套列。
<!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>偏移列
偏移用于增加列的左邊距。
例如，如果你有一個列出現(xiàn)在三個Bootstrap列之間，則可以使用偏移功能。
可用于偏移的類有：
- col-xs-offset-*
- col-sm-offset-*
- col-md-offset-*
- col-lg-offset-*
假設(shè)我們要在超小顯示器中向右移動一列三個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>此代碼將產(chǎn)生一個跨越6個Bootstrap列的列，向右偏移三列。
居中列
我們可以使用偏移來使列居中。只需將相同數(shù)量的列放置在居中列的兩側(cè)。
<!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- * 等的類用于將列向左和向右移動一定數(shù)量的列。
<!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列。它們似乎在瀏覽器上查看時已交換了其原始位置。根據(jù)屏幕大小有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之間的整數(shù)替換*。
以上內(nèi)容是否對您有幫助：
更多建議：