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

标签: bootstrap
17154人阅读 评论(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>

截图:

对比图

查看评论

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没...
  • liuyan19891230
  • liuyan19891230
  • 2016-03-24 10:21:56
  • 81648

Bootstrap Tooltip显示换行和左对齐

今天在使用Bootstrap的Tooltip功能时遇到2个小问题:换行丢失,文字不是左对齐。然后经过百度和Bing找到了解决方案。...
  • alanzyy
  • alanzyy
  • 2015-12-17 14:44:28
  • 11629

bootstrap table自动换行

怎样让HTML 表格中内容自动换行??style="word-break:break-all; word-wrap:break-all;" ...
  • pyphrb
  • pyphrb
  • 2015-09-22 12:07:32
  • 12603

BootStrap 的表格如何不自动换行

最近的项目中,在前端生成表格,发现偶尔会自动换行,查询之后在 添加style white-space :nowrap 避免了自动换行情况的发生。...
  • ShangQuan2012
  • ShangQuan2012
  • 2017-03-19 19:07:44
  • 4587

CSS强制英文、中文换行与不换行 强制英文换行

1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:...
  • pan_junbiao
  • pan_junbiao
  • 2012-04-01 10:12:24
  • 48911

BootStrap之一行显示两列

{% csrf_token %} {% for field in form %}
  • qq_33733970
  • qq_33733970
  • 2017-12-15 17:16:45
  • 108

bootstrap 文字不换行

用bootstrap写了一个文章详情页,发现文字不换行,如下 原因是,连续的英文字母被理解为一个单词了,所以,一般情况下是不会出现的,因为单词就没有那么长。 换个行就好了...
  • u013288190
  • u013288190
  • 2016-10-06 19:30:31
  • 4443

ul实现横向排列不换行的两种解决方案

刚学前端不久,尝试着写各种布局。今天想实现一个横向排列的照片列表,于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列,并没有限制ul一定不换行。当ul...
  • programerxiaoer
  • programerxiaoer
  • 2017-01-14 17:47:20
  • 12248

关于span标签内文字自动换行

white-space – 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 取值: normal | pre | nowrap | pre-wrap | pre-line | inh...
  • tszxlzc
  • tszxlzc
  • 2017-04-01 15:42:50
  • 2589

Bootstrap弹出窗内容的换行

bootstrap弹出窗可以方便的展示模块的详细信息,但是按照官网给定的写法发现内容不会换行,添加 标签内容还是原样输出到弹出窗中。 悬浮框效果图:同时需要js中初始化 : $('[data-togg...
  • InTheMirrors
  • InTheMirrors
  • 2017-06-06 20:02:43
  • 604
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 32万+
    积分: 3710
    排名: 1万+
    博客专栏
    最新评论
    样式调整