美文网首页
Bootstrap 框架的网格系统写法

Bootstrap 框架的网格系统写法

作者: 一只dororo | 来源:发表于2017-11-20 13:26 被阅读0次

1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。

如:<div class = "container"><div class = "row"></div></div>

2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。

如:<div class = "container"><div class = "row">

<div class = "col-md-4"><div>

<div class = "col-md-8"><div>

</div></div>

3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

注意:Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。

也就是说:<div class = "col-md-4"><div class = "row"></div></div>的写法是正确的。

相关文章

  • Bootstrap 框架的网格系统写法

    1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)...

  • bootstrap网格系统

    基本用法:网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootst...

  • Bootstrap学习(一)入门

    Date: 2018-10-17 1、Bootstrap网格系统 Bootstrap网格系统定义: Bootstr...

  • Jump Start Bootstrap 中文版 第2章

    第2章 Bootstrap 网格系统 在这一章,我们将讨论Bootstrap一个最重要的功能:网格系统。我们将学会...

  • 2018-04-05 Bootstrap

    bootstrap默认是支持jQuery的其是UI框架是给后端用的 这个版本需要jQuery 网格系统,搜grid...

  • 2018-09-17bootstrap基本的用法

    Bootstrap的网格系统将屏幕...

  • BootStrap 网格系统

    网络系统 bootstrap允许将页面划分成共12个等宽逻辑单元,既允许单独地使用这12个等分逻辑单元,也可以将其...

  • Bootstrap网格系统

    基本的网格结构下面是 Bootstrap 网格的基本结构: 1 row必须在container中,是行的概念,原本...

  • Bootstrap网格系统

    Bootstrap 4包含了一个强大的移动优先的网格系统,它是基于一个12列的布局,有5种响应尺寸(对应不同的屏幕...

  • Bootstrap网格系统

    尺寸对应尺寸对应图 所有类名① 容器:container, example-container, containe...

网友评论

      本文标题:Bootstrap 框架的网格系统写法

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