|
|
|
步骤 2 : 一半，1/3， 1/4 步骤 3 : 自动换行
运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。
运用Bootstrap的栅格系统，首选需要准备一个class=container的div 紧接着需要一个class=row的 div，表示行 再挨着的div，就是列了。 Bootstrap的栅格系统会默认把一行，分成12列。 <!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.container div.row div {
margin:5px 0px;
}
div.container div.row div {
background-color: lightgray;
border: 1px solid gray;
text-align:center;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12 ">一共12列</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4 ">占4列</div>
<div class="col-xs-4 ">占4列</div>
<div class="col-xs-4 ">占4列</div>
</div>
</div>
根据栅格系统的规划，要实现一半，1/3,1/4的布局，就很容易实现了。
注：一行不是必须添满的，比如第3行，只填了3个 1/4，最后一个1/4就可以空着 <!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.container div.row div {
margin:5px 0px;
}
div.container div.row div {
background-color: lightgray;
border: 1px solid gray;
text-align:center;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-6 ">一半</div>
<div class="col-xs-6 ">一半</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4 ">1/3</div>
<div class="col-xs-4 ">1/3</div>
<div class="col-xs-4 ">1/3</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-3 ">1/4</div>
<div class="col-xs-3 ">1/4</div>
<div class="col-xs-3 ">1/4</div>
</div>
</div>
当同一行的栅格总数超过12的时候，就会自动换行
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.container div.row div {
margin:5px 0px;
}
div.container div.row div {
background-color: lightgray;
border: 1px solid gray;
text-align:center;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-6 ">一半</div>
<div class="col-xs-6 ">一半</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-8 ">8格</div>
<div class="col-xs-6 ">6格</div>
</div>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-04-11
如果想一行超过12个列，可以实现吗?
3 个答案
ffk 跳转到问题位置 答案时间：2021-06-08 看看bootstrap的源码就知道其工作原理了，你更改所占百分比就行
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
暮行 跳转到问题位置 答案时间：2020-07-23 一行默认12列，应该可以修改源码
学生new 跳转到问题位置 答案时间：2020-06-16 你就不会试一下？这学习态度会让站长寒心的
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2018-09-15
还是没怎么看懂。。直接用div不行吗？
2017-11-14
栅格布局是做什么用的？是用来对网页进行布局的时候用吗？
2017-10-11
把几个row放到一个container里也可以吧，不用每个row都写一个container吧
2017-09-21
不要有间距，充满页面
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 3 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
