栅格系统

Posted 2020-11-22 li496903

栅格布局

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>