网格

作者: 潇潇翔子 | 来源:发表于2018-08-22 15:01 被阅读17次

网格选项

.col-xs- : 超小设备手机(<768px)
.col-sm- : 小型设备平板电脑(≥768px)
.col-md- : 中型设备台式电脑(≥992px)
.col-lg- : 大型设备台式电脑(≥1200px)

wangge.png

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">

偏移列

.col-md-offset-* : 把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11

**响应式的列重置 ** : .clearfix

嵌套列

为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

列排序

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

相关文章

  • CSS Grid Auto

    关键词:隐式轨道 / 隐式网格 / 自动布局算法 隐式网格 隐式网格是指当网格项目确认在显式网格之外时所创建的网格...

  • GridLayout网格布局

    网格术语 网格线(Grid Lines)网格线组成了网格,他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧...

  • 铜沛

    铜沛网格 铜沛网格

  • 九宫格拖拽

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

  • 九宫格拖拽

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

  • 网格

    遵守网格的协议 创建网格

  • 11月24日4D分享

    A:加班整理网格基础数据,网格人员表示很无奈,不认可。 M:很郁闷。 B:网格人员被我留下来加班整理网格的基础数据...

  • 10月17日4D8B分享

    A:本日对本网格行销团队在其他网格行销是否回自己网格行销事情纠结不清,无法和网格经理达成一直。 M:心中纠结,难以...

  • 民健社区网格长的一天

    小网格,释放大能量。社区矛盾调解、安全检查,环境整治、小广告清理、网格巡查等诸多事项,无不由网格长协调网格员处理。...

  • 网格化的前世今生

    作者:丁野菠 江安警官学院社会治理专业资深讲师 现在谈到社会治理必谈网格化,还有网格员、网格长、总网格长...

网友评论

      本文标题:网格

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