码迷,mamicode.com
首页 > 其他好文 > 详细

栅格系统

时间:2019-11-23 12:39:35      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:bsp   -o   class   栅格系统   创建   container   contain   uid   固定   

栅格布局

container,固定宽度的容器。

container-fluid,百分百宽度的容器。

使用行(row)在水平方向上创建一组列(colmun)。

每一行中最多能够包含12列,超出的列则另起一行排列

你的内容应该放置到列(colmun)中,只有列(colmun)可以作为行(row)的直接子元素。

 

列偏移

使用col-*-offset-*类可以将列向右偏移,例如,col-xs-offset-4表示在超小屏幕上时,将元素向右偏移4列。

 

<div class="container">

        <div class="row">

            <div class="col-xs-4"><div class="box">1</div></div>

            <div class="col-xs-4 col-xs-offset-4"><div class="box">2</div></div>

        </div>

        <div class="row">

            <div class="col-xs-3 col-xs-offset-3"><div class="box">1</div></div>

            <div class="col-xs-3 col-xs-offset-3"><div class="box">2</div></div>

        </div>

        <div class="row">

            <div class="col-xs-6 col-sm-4"><div class="box">1</div></div>

            <div class="col-xs-6 col-sm-4"><div class="box">2</div></div>

            <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0">

<div class="box">3</div>

</div>

        </div>

    </div>

栅格系统

标签:bsp   -o   class   栅格系统   创建   container   contain   uid   固定   

原文地址:https://www.cnblogs.com/li496903/p/11916904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!