解决bootstrap row span设置border换行的问题
解决bootstrap row span设置border换行的问题
他叫自己MR.张
发布于 2019-07-01 15:18:06
发布于 2019-07-01 15:18:06
版权声明：本文为他叫自己Mr.张的原创文章，转载请注明出处，否则禁止转载。 https://cloud.tencent.com/developer/article/1453386
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>截图：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年05月31日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录