步骤 2 : 一半,1/3, 1/4 步骤 3 : 自动换行
运用Bootstrap的栅格系统,可以做出像table那样定义多少行,多少列效果,但是又比table灵活。
运用Bootstrap的栅格系统,首选需要准备一个class=container的div 紧接着需要一个class=row的 div,表示行 再挨着的div,就是列了。 Bootstrap的栅格系统会默认把一行,分成12列。 <!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="http://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="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="http://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="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet">
<script
src="http://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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。
![]()
问答区域
2017-11-14
栅格布局是做什么用的?是用来对网页进行布局的时候用吗?
1 个答案
how2j 答案时间:2017-11-14 是用来做自适应的,当屏幕宽度不一样的时候,会自动分成不同的等分
2017-10-11
把几个row放到一个container里也可以吧,不用每个row都写一个container吧
2017-09-21
不要有间距,充满页面
2017-08-20
3.3.7显示错误,可以确定是boostrap.min.css的问题
2017-08-05
col-md col-xs
2017-08-01
<div class="container">
2016-11-09
col-某某-某某 以及似乎还少了offset 位移的介绍了呢
提问之前请登陆 |