This article is reproduced from: https://www.cnblogs.com/LJYqq/p/6791512.html
grid system
media inquiries
In the grid system, we use the following media query in the Less file to create the critical cutpoint thresholds.
小屏幕（平板，大于等于 768px）
@media (min-width: @screen-sm-min) { ... } 中等屏幕（桌面显示器，大于等于 992px） @media (min-width: @screen-md-min) { ... } 大屏幕（大桌面显示器，大于等于 1200px） @media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
grid parameters
Example: From Stacked to Horizontal Arrangement
Example: Fluid Layout Container
You can convert a fixed-width grid layout to a 100%-width layout by modifying the outermost layout element to . .container .container-fluid
Example: Mobile and Desktop Screens
Example: The extra column (column) will be arranged on a new line
Responsive column reset
Even with the four sets of raster classes given above, you will inevitably encounter some problems, for example, at certain thresholds, some columns may appear higher than others. To overcome this problem, it is recommended to use in conjunction with reactive utility classes . .clearfix
column offset
Use classes to offset columns to the right. These classes actually add a left margin to the current element by using selectors. For example, the class offsets the element to the right by a width of 4 columns. .col-md-offset-* *.col-md-offset-4 .col-md-4
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
You can also override offsets from lower grid tiers with .col-*-offset-0 classes
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>
nested columns
In order to use the built-in grid system to nest content again, you can add a new element and a series of elements to the existing elements. The number of columns (columns) contained in the nested row (row) cannot exceed 12 (in fact, there is no requirement that you must occupy all 12 columns). .row .col-sm-* .col-sm-*
column sorting
The order of the columns can be easily changed by using the sum class. .col-md-push-* .col-md-pull-*
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style type="text/css">
.row div{
height: 300px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-xs-6 col-lg-3 col-md-6"></div>
<div class="col-sm-12 col-xs-6 col-lg-3 col-md-6"></div>
<div class="col-sm-12 col-xs-6 col-lg-3 col-md-6"></div>
<div class="col-sm-12 col-xs-6 col-lg-3 col-md-6"></div>
<div class="col-sm-12 col-xs-6 col-lg-6 col-md-6"></div>
<div class="col-sm-12 col-xs-6 col-lg-6 col-md-6"></div>
</div>
</div>
</body>
