Bootstrap 框架栅格系统的嵌套

最新推荐文章于 2022-05-04 20:29:56 发布

雨落听风清

最新推荐文章于 2022-05-04 20:29:56 发布

阅读量1k

点赞数

文章标签： bootstrap html5

本文链接：https://blog.csdn.net/Rock_clip/article/details/120598602

版权

1.列嵌套

在一个列中嵌套一个或多个行。每一行依然遵守最大是12行的规则，多的另外起一行，在某一行中你可以占满12列也可以不占满12列，但不管怎样都遵守行规则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列嵌套</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
<body> 
    <p style="text-align: center;font-size: 30px">栏格布局-列嵌套</p>
   <div class="container">
        <div class="row"> 
            <div class="col-sm-9">
                第一层:col-sm-9
                <div class="row">
                    <div class="col-xs-8 col-sm-6">第二层:col-xs-8 col-sm-6</div>
                    <div class="col-xs-4 col-sm-6">第二层：col-xs-4 col-sm-6</div>
                </div>
            </div>
        </div>
   </div>
</body>
</html>

2.列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）,和设置margin的效果相同。来解决两个相邻元素需要去分开的一个途径，从而来代替margin，只需要在列元素里添加相应的类名，那么具有这个类名都会有这种效果

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>

3.列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。取值区间为为1~12。col-md-push- 将元素向右推个列的宽度，col-md-pull- 将元素向左拉*个列的宽度。列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
</div>

雨落听风清

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 框架栅格系统的嵌套

1.列嵌套在一个列中嵌套一个或多个行。每一行依然遵守最大是12行的规则，多的另外起一行，在某一行中你可以占满12列也可以不占满12列，但不管怎样都遵守行规则。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列嵌套</title> <link rel="stylesheet" href="css/bootst
复制链接

扫一扫