Bootstrap 框架的网格系统写法

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>的写法是正确的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,917评论 3 184
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • 实现原理 网格系统的实现原理,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),...
    lvyweb阅读 1,629评论 1 2