当前第2页 返回上一页
如下
1 2 3 4 5 6 7 8 | 固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>
|
在bootstrap的css文档中@media属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 1591~1605行
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
……
|
以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。
推荐：bootstrap入门教程
以上就是bootstrap怎么实现响应式布局的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
bootstrap.js有什么用
bootstrap能和vue一起用吗
elementui和bootstrap区别
bootstrap table插件怎么换行
浅谈bootstrap中处理树列表条件和查询条件的方法
如何解决bootstrap table乱码问题
bootstrap插件有哪些
bootstrap heading是什么意思
spss中怎么用bootstrap做中介分析
bootstrap如何获取行数据？
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » bootstrap怎么实现响应式布局
