美文网首页Bootstrap 自学笔记
网格系统 - Grid System

网格系统 - Grid System

作者: 勤劳的悄悄 | 来源:发表于2016-03-22 15:53 被阅读924次

    两列布局

    <div class="container">

    <!--两列宽度相等-->
    <div class="row">
        <div class="col-sm-6"><!--Column left--></div>
        <div class="col-sm-6"><!--Column right--></div>
    </div>
    
    <!--两列宽度比为 1:2 -->
    <div class="row">
        <div class="col-sm-4"><!--Column left--></div>
        <div class="col-sm-8"><!--Column right--></div>
    </div>
    
    <!--两列宽度比为 1:3 -->
    <div class="row">
        <div class="col-sm-3"><!--Column left--></div>
        <div class="col-sm-9"><!--Column right--></div>
    </div>
</div>
    01.三行都是两列布局，列的宽度比不同

    三列布局

    <div class="container">
    <!--三列相等-->
    <div class="row">
        <div class="col-md-4"><!--Column left--></div>
        <div class="col-md-4"><!--Column middle--></div>
        <div class="col-md-4"><!--Column right--></div>
    </div>
    
    <!--三列宽度比为 1:4:1 -->
    <div class="row">
        <div class="col-md-2"><!--Column left--></div>
        <div class="col-md-8"><!--Column middle--></div>
        <div class="col-md-2"><!--Column right--></div>
    </div>
    
    <!--随意分配三列宽度-->
    <div class="row">
        <div class="col-md-3"><!--Column left--></div>
        <div class="col-md-7"><!--Column middle--></div>
        <div class="col-md-2"><!--Column right--></div>
    </div>
</div>
    02.三行都是三列布局，列的宽度比不同

    针对两种不同尺寸屏幕的响应式布局

    • 在中、大尺寸下，一行显示；
    • 在小尺寸下，两行显示
    <div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2"><!--Column one--></div>
        <div class="col-sm-9 col-md-8"><!--Column two--></div>
        <div class="col-sm-12 col-md-2"><!--Column three--></div>
    </div>
</div>
    03-1.三列布局：在大窗口下显示 03-2.三列布局：在小窗口下显示

    列重置

    下面的代码正常情况应该出现四行，每行三列。特殊情况下换行可能出现问题，例如：某个元素高度超过一行的宽度，其后面的元素换行的时候就无法顶头换行，而是顶着这个超过行高的元素换行。

    <div class="container">
    <div class="row">
        <div class="col-md-4"><p style="height: 200px;">Box 1</p></div>
        <div class="col-md-4"><p>Box 2</p></div>
        <div class="col-md-4"><p>Box 3</p></div>

        <!-- 下一个元素是换行元素，有可能会被卡主 -->
        <div class="col-md-4"><p>Box 4</p></div>
        <div class="col-md-4"><p>Box 5</p></div>
        <div class="col-md-4"><p>Box 6</p></div>

        <!-- 下一个元素是换行元素，有可能会被卡主 -->
        <div class="col-md-4"><p>Box 7</p></div>
        <div class="col-md-4"><p>Box 8</p></div>
        <div class="col-md-4"><p>Box 9</p></div>
        <div class="col-md-4"><p>Box 10</p></div>
        <div class="col-md-4"><p>Box 11</p></div>
        <div class="col-md-4"><p>Box 12</p></div>
    </div>
</div>
    04-1.Box 4 元素被卡主，无法顶头换行

    为了消除这种情况，可以在换行后可能被挡住的元素前面加入一个 clearfix 元素，这样换行元素就会顶头换行。

    visible-md-block 表示只对 md 尺寸的列进行处理，如果不加限定，则对所有尺寸的列进行处理。

    <div class="container">

    <!-- 三列布局 -->
    <div class="row">
        <div class="col-md-4"><p style="height: 200px;">Box 1</p></div>
        <div class="col-md-4"><p>Box 2</p></div>
        <div class="col-md-4"><p>Box 3</p></div>

        <!-- 下一个元素是换行元素，有可能被卡主，因此需要添加 clearfix 类 -->
        <div class="clearfix visible-md-block"></div>
        <div class="col-md-4"><p style="height: 200px;">Box 4</p></div>
        <div class="col-md-4"><p>Box 5</p></div>
        <div class="col-md-4"><p>Box 6</p></div>

        <!-- 下一个元素是换行元素，有可能被卡主，因此需要添加 clearfix 类 -->
        <div class="clearfix visible-md-block"></div>
        <div class="col-md-4"><p style="height: 200px;">Box 7</p></div>
        <div class="col-md-4"><p>Box 8</p></div>
        <div class="col-md-4"><p>Box 9</p></div>

        <!-- 下一个元素是换行元素，有可能被卡主，因此需要添加 clearfix 类 -->
        <div class="clearfix visible-md-block"></div>
        <div class="col-md-4"><p style="height: 200px;">Box 10</p></div>
        <div class="col-md-4"><p>Box 11</p></div>
        <div class="col-md-4"><p>Box 12</p></div>
    </div>
</div>
    04-2.正常换行

    针对两种不同尺寸屏幕的响应式列重置

    注意：下面的代码只设置了 md 尺寸的屏幕下的列重置；其他尺寸屏幕下不会列重置，换行后的元素仍然会被卡主

    <div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 1</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 2</p></div>

        <!-- 在小尺寸屏幕下，这个元素就是换行元素，有可能会被卡主 -->
        <div class="col-sm-6 col-md-4"><p>Box 3</p></div>

        <!-- 在中等尺寸屏幕下，这个元素是换行元素，有可能会被卡主 -->
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 4</p></div>

        <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 6</p></div>

        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 7</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 9</p></div>

        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 10</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
    </div>
</div>
    04-3.在小屏幕下，换行出现错误

    因此，应该为小尺寸下每个换行的元素也设置列重置

    <div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 1</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 2</p></div>

        <!-- 在小尺寸屏幕下，这个元素就是换行元素，有可能会被卡主 -->
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4"><p>Box 3</p></div>

        <!-- 在小尺寸屏幕下，这个元素就是换行元素，有可能会被卡主 -->
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 4</p></div>


        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4"><p>Box 5</p></div>

        <div class="col-sm-6 col-md-4"><p>Box 6</p></div>

        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 7</p></div>

        <div class="col-sm-6 col-md-4"><p>Box 8</p></div>

        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4"><p>Box 9</p></div>

        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4"><p style="height: 200px;">Box 10</p></div>

        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
        <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
    </div>
</div>
    04-4.同时考虑不同屏幕尺寸下的列重置

    针对两种不同尺寸屏幕的响应式列重置

    同样是在每一个可能会被卡主的的元素前进行列重置

    <div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3"><p  style="height: 200px;">Box 1</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>

        <!-- 该处在小尺寸下会换行 -->
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>

        <!-- 该处在中等尺寸下会换行 -->
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>

        <!-- 该处在小尺寸、大尺寸下会换行 -->
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>

        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>

        <!-- 该处在小尺寸、大尺寸下会换行 -->
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>

        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
    </div>
</div>

    列偏移

    在设置列占用的宽度时，可以同时设置偏移数，

    <div class="container">

    <!-- 这一行有两列，宽度比 4:8 -->
    <div class="row">
        <div class="col-sm-4">
            <div class="demo-content">.col-sm-4</div>
        </div>
        <div class="col-sm-8">
            <div class="demo-content bg-alt">.col-sm-8</div>
        </div>
    </div>

     <!-- 这一行只有一个 8 单位宽度的列，同时给他设置了 4 单位的偏移 -->
    <div class="row">
        <div class="col-sm-8 col-sm-offset-4">
            <div class="demo-content bg-alt">.col-sm-8 .col-sm-offset-4</div>
        </div>
    </div>


    <hr>


    <!-- 这一行有两列，宽度比 3:9 -->
    <div class="row">
        <div class="col-sm-3">
            <div class="demo-content">.col-sm-3</div>
        </div>
        <div class="col-sm-9">
            <div class="demo-content bg-alt">.col-sm-9</div>
        </div>
    </div>


    <!-- 这一行有两列，第一列宽度为 6 ，偏移3，合计 9 -->
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <div class="demo-content bg-alt">.col-sm-6 .col-sm-offset-3</div>
        </div>
        <div class="col-sm-3">
            <div class="demo-content">.col-sm-3</div>
        </div>
    </div>


    <hr>

     
    <!-- 这一行有四列，宽度比为 3:3:3:3-->
    <div class="row">
        <div class="col-sm-3">
            <div class="demo-content">.col-sm-3</div>
        </div>
        <div class="col-sm-3">
            <div class="demo-content bg-alt">.col-sm-3</div>
        </div>
        <div class="col-sm-3">
            <div class="demo-content">.col-sm-3</div>
        </div>
        <div class="col-sm-3">
            <div class="demo-content bg-alt">.col-sm-3</div>
        </div>
    </div>


      <!-- 这一行有两列，没咧列宽度都为 3 ，偏移 3，合计 6 -->
    <div class="row">
        <div class="col-sm-3 col-sm-offset-3">
            <div class="demo-content bg-alt">.col-sm-3 .col-sm-offset-3</div>
        </div>
        <div class="col-sm-3 col-sm-offset-3">
            <div class="demo-content">.col-sm-3 .col-sm-offset-3</div>
        </div>
    </div>
</div>
    05.列偏移

    嵌套

    在一个网格中可以继续创建行和列

    <div class="container">
    <div class="row">
        <div class="col-xs-8"><!--Column left--></div>

        <!-- 下一列中将嵌套创建新的行和列 -->
        <div class="col-xs-4">

            <!-- 嵌套的行列 -->
            <div class="row">
                <div class="col-xs-12"></div>
            </div>
            <div class="row">
                <div class="col-xs-12"></div>
            </div>

        </div>
    </div>
</div>
    06.网格嵌套

    只在特定尺寸下显示的块

    通过下面几个类，可以将元素设置成只在特定尺寸下显示的块

    <p class="visible-xs">当前图块只在 <strong>超小屏幕</strong> 设备下显示，宽度小于 <code>768px</code>.</p>
<p class="visible-sm">当前图块只在 <strong>小屏幕</strong> 设备下显示，宽度大于等于 <code>768px</code> 小于 <code>992px</code>.</p>
<p class="visible-md">当前图块只在 <strong>中等屏幕</strong> 设备下显示，宽度大于等于 <code>992px</code> 小于 <code>1200px</code>.</p>
<p class="visible-lg">当前图块只在 <strong>大屏幕</strong> 设备下显示，宽度大于等于 <code>1200px</code>.</p>

    通过下面几个类，可以将元素设置成只在特定尺寸下隐藏

    Class Description
    .hidden-xs
    .hidden-sm
    .hidden-md
    .hidden-lg

    通过下面几个类，可以将元素设置成只在特定尺寸下隐藏

    Class Description
    .visible-print-block
    .visible-print-inline
    .visible-print-inline-block
    .hidden-print

    相关文章

      网友评论

        本文标题：网格系统 - Grid System

        本文链接：https://www.haomeiwen.com/subject/kjkllttx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Bootstrap 自学笔记

        关于我们|服务条款|联系我们|网格系统 - Grid System|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！