实现原理，玩转Bootstrap（基础）教程-慕课网

实现原理

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。

（这一章节注意效果要在全屏状态下查看，鼠标滑过结果窗口时可单击出现的全屏按钮）

任务

我来试试：查看右侧代码编辑器的代码。

?不会了怎么办

问答
评论
笔记
代码

全部精华我要发布

网格系统问题

最赞回答 / 慕标9215325

首先使用col-md-*的效果区间是浏览器可视宽度在992px~1220px之间，如果小于992px，bootstrup就会使用col-sm-*，若没有这个class，bootstrup就会把一列变成单独的一行，即占用12列的宽度，你这种情况一种可能是你的浏览器屏幕可视（即显示你当前这个窗口）的宽度小于992px，也有可能是没有引入bootstrup的依赖文件，还有可能是模板格式没有写对，再者就是你可能在class属性值里面写的并不是bootstrup在css文件中声明的class变量（如col-xs-*...

4 回答 1131 浏览

2021-07-16

这个行列问题

最新回答 / 温柔w

我的也是这样啊有点不太明白

2 回答 1311 浏览

2019-02-21

为什么我的.container是灰色（不能用）？

已采纳回答 / Lew_H

我的都没有，最好是把style放在head里面.

2 回答 1537 浏览

2017-04-25

为啥不能从头到尾用一个<div class="row"></div>反而用3次呢

最赞回答 / livelove

因为举例子是用了三个容器啊？、，每个容器分12份。每一个divs是一个容器。

4 回答 4312 浏览

2018-05-27

有问题啊,这是怎么回事

已采纳回答 / 見贤思齐

全屏还是小。你把md换成xs试试

4 回答 1049 浏览

2019-08-08

网格系统是什么东西

最赞回答 / 荼酒

http://v3.bootcss.com/css/#grid 栅格系统

3 回答 1187 浏览

2016-08-23

为什么这里要用class=“container”呀？

已采纳回答 / 饼bing

container 是bootstrap的外围容器栅格化布局的基础使用在响应式布局的框架网站里这个类<div class"container"></div>中嵌套<div class="row"><div class="col-md-12"><div></div>

5 回答 22827 浏览

2019-01-08

bootstrap怎么没有效果

+ 我来回答回答最高可+2积分

3 回答 2585 浏览

2022-07-07

在本地写的代码没有效果怎么办？

+ 我来回答回答最高可+2积分

8 回答 1524 浏览

2022-09-06

chrom不work，改成div class="col-sm-1">.col-md-2</div>

+ 我来回答回答最高可+2积分

4 回答 561 浏览

2022-09-07

为什么不能缓存视频

最新回答 / 撑竹伞的白鹭

你是说视频教程吗？可以缓存的，下载慕课网的app就行，但是这种带编辑功能的好像不能缓存的

1 回答 788 浏览

2016-08-23

网格系统
<div class="container">
<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>

最新回答 / qq_华明新Q_0

你是靓女吗？

2 回答 1096 浏览

2016-08-23

code

+ 我来回答回答最高可+2积分

0 回答 722 浏览

2014-10-20

不是12行，你要全屏来看啊，就是12列了

最新回答 / qq__3166

row代表行，其内包含的div都是列

1 回答 856 浏览

2016-08-23

分成12份不是应给是分成12列吧，而不是分12行，分12行col-md-*和row有什么区别啊。

最赞回答 / w3cplus

row是表示行，那么每行包括的列数之和是12列。超过1２列就会溢出。一般情况下，row中包括的列数之和等于12，比如使用col-md-*。那么.row>col-md-4*3。不管什么样的网格系统，他的原理都是来自于960gs，如果将960gs整明白了，任何网格对你来说都不是问题：http://www.w3cplus.com/css/css-layout-with-960-grids

1 回答 1245 浏览

2016-08-23

全部我要发布

最热最新

只看我的

4-1 实现原理

实现原理

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

网格系统问题

这个行列问题

为什么我的.container是灰色（不能用）？

为啥不能从头到尾用一个<div class="row"></div>反而用3次呢

有问题啊,这是怎么回事

网格系统是什么东西

为什么这里要用class=“container”呀？

bootstrap怎么没有效果

在本地写的代码没有效果怎么办？

chrom不work，改成div class="col-sm-1">.col-md-2</div>

为什么不能缓存视频

code

不是12行，你要全屏来看啊，就是12列了

分成12份不是应给是分成12列吧，而不是分12行，分12行col-md-*和row有什么区别啊。

推荐课程

手记推荐

4-1 实现原理

热搜

最近搜索清空

实现原理

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

推荐课程

相关课程

手记推荐

账号登录 验证码登录

账号登录验证码登录