解决bootstrap row span设置border换行的问题

标签: bootstrap
14231人阅读 评论(0) 收藏 举报
分类:

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>

截图:

对比图

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:244216次
    • 积分:3061
    • 等级:
    • 排名:第12089名
    • 原创:62篇
    • 转载:8篇
    • 译文:3篇
    • 评论:131条
    博客专栏
    文章分类
    样式调整
    • 1. 优化正文标题区分强度
    • 2. 优化行内代码的显示样式
    • 3. 修复 Safari 浏览器下字体样式错误