关闭

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

标签: bootstrap
15944人阅读 评论(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网站的观点或立场

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

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,...
  • liuyan19891230
  • liuyan19891230
  • 2016-03-24 10:21
  • 49787

bootstrap table自动换行

怎样让HTML 表格中内容自动换行??style="word-break:break-all; word-wrap:break-all;"<div class="span12"> <table class="table ta...
  • pyphrb
  • pyphrb
  • 2015-09-22 12:07
  • 11229

Bootstrap弹出窗内容的换行

bootstrap弹出窗可以方便的展示模块的详细信息,但是按照官网给定的写法发现内容不会换行,添加<br> 标签内容还是原样输出到弹出窗中。 悬浮框效果图:同时需要js中初始化 : $('[data-toggle="popover"]').popove...
  • InTheMirrors
  • InTheMirrors
  • 2017-06-06 20:02
  • 457

BootStrap 的表格如何不自动换行

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

bootstrap 文字不换行

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

bootstrap tooltip 回车换行

添加 data-html=”true” title中需要回车添加 <button class="btn btn-default" data-html="true" data-toggle="tooltip" title="...
  • ISaiSai
  • ISaiSai
  • 2016-10-12 21:06
  • 1906

Bootstrap Datatable 简单的基本配置

$(document).ready(function() {     $('#example').dataTable({ "sScrollX": "100%"...
  • mrandy
  • mrandy
  • 2016-09-20 22:48
  • 7265

bootstrap3中container与container_fluid容器的区别

.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度,占据全部视口(viewport...
  • hjb2722404
  • hjb2722404
  • 2015-04-24 10:06
  • 40278

解决Bootstrap container样式左右内边距15px,导致屏幕不美观

首先上问题:此问题为bootstrap的 container样式导致,该样式默认左右内边距15px为了栅栏效果而设计,具体看源码css样式,如下图,右侧黄色边框边距和30px,实为两个div左浮动,将边距挤到右侧; 解决它很简单:只需复写 container样式 padding-left:0p...
  • SmallLu161226
  • SmallLu161226
  • 2017-01-13 10:19
  • 6287

Bootstrap导航栏中按钮间添加竖线分隔

要实现的效果如图所示: 这里没有什么难点,只是感觉这种布局使用挺多的,纪录一下,方便以后使用。 曾经想过的思路: 添加相同的<li><a href="#">|</a></li>标签, 但是元素间距离会变大,因为|占据同等宽度 ...
  • u012086400
  • u012086400
  • 2017-12-03 18:27
  • 162
    个人资料
    • 访问:292234次
    • 积分:3455
    • 等级:
    • 排名:第11249名
    • 原创:67篇
    • 转载:8篇
    • 译文:3篇
    • 评论:139条
    博客专栏
    文章分类
    最新评论
    样式调整
    • 1. 优化正文标题区分强度
    • 2. 优化行内代码的显示样式
    • 3. 修复 Safari 浏览器下字体样式错误