<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- cdn 就是把代码发布到服务器 可以减少项目的体积 但是 项目必须要允许连接互联网 局域网不可以 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.border {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 可以将row居中 -->
<div class="container" style="width: 100%;">
<!-- 列组合 -->
<!-- <div class="row">
<div class="col-md-3 border">.col-md-3</div>
<div class="col-md-3 border">.col-md-3</div>
<div class="col-md-3 border">.col-md-3</div>
<div class="col-md-3 border">.col-md-3</div>
</div> -->
<!-- 列偏移 -->
<!-- <div class="row">
<div class="col-md-4 border">.col-md-4</div> -->
<!-- 向右偏移4个栅格 -->
<!-- <div class="col-md-4 col-md-offset-4 border">.col-md-4 .col-md-offset-4</div>
</div> -->
<!-- 列嵌套 -->
<!-- <div class="row" >
<div class="col-md-8 border"> -->
<!-- col-md-8 -->
<!-- <div class="row">
<div class="col-md-6 border">col-md-6</div>
<div class="col-md-6 border">col-md-6</div>
</div>
</div>
<div class="col-md-4 border">
col-md-4
</div>
</div> -->
<!-- 列的排序 -->
<!-- <div class="row border"> -->
<!-- push 向右边推三个栅格 -->
<!-- <div class="col-md-9 col-md-push-3 border">.col-md-9 .col-md-push-3</div> -->
<!-- <div class="col-md-3 col-md-pull-9 border">.col-md-3 .col-md-pull-9</div> -->
<!-- </div> -->
<!-- <div class="row border"> -->
<!-- 向左拉9个栅格 -->
<!-- <div class="col-md-3 col-md-pull-9 border">.col-md-3 .col-md-pull-9</div>
</div> -->
<!-- <div class="row">
<div class="col-md-9 col-md-push-3 border">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9 border">.col-md-3 .col-md-pull-9</div>
</div> -->
<!-- <div class="row ">
<div class="col-lg-6 col-md-12 border">col-lg-6</div>
<div class="col-lg-6 col-md-12 border">col-lg-6</div>
</div> -->
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 border">col-md-3</div>
<div class="col-md-3 col-sm-6 col-xs-12 border">col-md-3</div>
<div class="col-md-3 col-sm-6 col-xs-12 border">col-md-3</div>
<div class="col-md-3 col-sm-6 col-xs-12 border">col-md-3</div>
</div>
</div>
</body>
</html>
