美文网首页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

    两列布局 三列布局 针对两种不同尺寸屏幕的响应式布局 在中、大尺寸下，一行显示； 在小尺寸下，两行显示 列重置 下...

  • Bootstrap3 - 3.网格系统

    网格系统：Grid System文章介绍：https://www.w3cplus.com/css3/introdu...

  • 0215--Bootstrap

    1.Bootstrap网格系统（Grid System）Bootstrap 提供了一套响应式、移动设备优先的流式网...

  • Bootstrap速查手册

    二.排版 1. 默认网格系统(Default Grid System) 布局提供一个固定宽度的布局（如果引用了bo...

  • 什么是栅格系统

    一、概念 1、栅格系统（grid systems），也叫“网格系统”。栅格设计系统（又称网格设计系统、标准尺寸系统...

  • Grid布局

    CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变...

  • CSS Grid 布局

    CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变...

  • 网格系统（grid）

    网格系统代码网格系统测试代码 1.思路 使用row.vue和col.vue构成网格系统的基础部分 两单文件所需要的...

  • CSS Grid 布局完全指南3-网格项(Grid Items)

    上一篇，介绍了grid的网格容器属性，接下来继续介绍grid的网格项 属性。 网格项(Grid Items) 属性...

  • 九宫格拖拽

    效果实例 简单了解Grid布局（网格布局） 什么是网格布局 CSS网格布局（又称“网格”），是一种二维网格布局系统...

网友评论

    本文标题：网格系统 - 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

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

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