Bootstrap - 栅格系统布局

结构必须是:
container->row->col
容器->行->列。
必须是列为基本元素。

代码:

 <div class="container">
    <div class="row">
      <div class="col-md-4">col-md-4 </div>
      <div class="col-md-4">col-md-4 </div>
      <div class="col-md-4">col-md-4 </div>
    </div>
  </div>

行(row)必须包含在.container(固定宽度)或者.container-fluid(100%宽度)中。
使用.col-md-*栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的,在桌面(>970px)屏幕设备上变为水平排列。

注意:col-md-* 是(手机,平板 与 电脑屏幕的分界)

示例:

<div class="container" id="summary-container">
    <div class="row">
      <div class="col-md-4">
        <h6>第一个栏</h6>
        <p>the first col</p>
      </div>
      <div class="col-md-4">
        <h6>第二个栏</h6>
        <p>the second col</p>
      </div>
      <div class="col-md-4">
        <h6>第三个栏</h6>
        <p>the thrid col</p>
      </div>
    </div>
  </div>

样式:

#summary-container {
  margin-top: 60px;
}
#summary-container .col-md-4 {
  text-align: center;
  border: 1px solid #2a6496;
}

效果:


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

推荐阅读更多精彩内容

  • 比较重点的部分:http://v3.bootcss.com/css/#grid Bootstrap 是移动设备优先...
    小草莓蹦蹦跳阅读 1,113评论 0 2
  • 1、栅格系统 Bootstrap默认的是栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来...
    07120665a058阅读 536评论 0 3
  • 本文参考来自bootstrap栅格化系统实现http://getbootstrap.com/css/#grid B...
    清晓凝露阅读 6,145评论 0 6
  • 问题 在多线程中,如果采用SimpleDateFormat直接进行日期转化需要注意,有坑,SimpleDateFo...
    尧字节阅读 873评论 0 1
  • 金庸先生的小说,女主角的名字通常平平无奇,四平八稳,像黄蓉、赵敏、任盈盈、温青青,甚至有人连个正式的名字都没有,如...
    林慕言阅读 742评论 0 3