Hadoop方面的毕业设计告一段落了,趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap。
本文记录Bootstrap框架使用栅格系统时,遇到row内的span设置border换行的问题。
问题再现
<style>
.row div{
border:solid 1px #eee;
}
</style>
<div class="container">
<div class="row">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
</div>
CSS为row
里面的span*
设置边框后会导致最后一个span*
换行,原因是栅格系统写死了span
的宽度,并且使用float
的方式排列row
内的sapn*
,加上边框后导致宽度增加,所以会自动换行。
解决方案
方案一
要求尽量不修改网格的样式,避免自定义CSS与Bootstrap的栅格系统产生冲突:
<style>
.span4 > div, .span8 > div
{
border: 1px solid #888;
}
</style>
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
方案二
使用 row-fluid
代替 row
<style>
.row-fluid div{
border:solid 1px #eee;
}
</style>
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
</div>
方案对比
<style type="text/css">
.span4 > div,
.span8 > div {
background: #0088CC;
text-align: center;
color: #fff;
border: 1px solid #888;
}
.row-fluid div {
background: #0088CC;
text-align: center;
color: #fff;
border: solid 1px #eee;
}
</style>
<div class="container">
<hr>
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
<hr>
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
</div>
截图:
时间: 2024-10-19 07:35:41