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

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

解决bootstrap row span设置border换行的问题的相关文章

解决在网页里设置锚点后,链接不到相应位置

在网页里设置锚点后,链接不到相应位置,常常出现点完链接后跳到相应位置偏下的位置, <div class="row" id="alter-title" name="alter-title"> 只需要在设置id的位置设置它的样式padding-top; .row{padding-top:20px;} 像数根据实际情况调 解决在网页里设置锚点后,链接不到相应位置,布布扣,bubuko.com

mysql 主从同步故障解决 &nbsp; Error &#39;Row size too large (&gt; 8126).

错误日志:  Error 'Row size too large (> 8126). Changing some columns to TEXT or BLOB   or using ROW_FORMAT=DYNAMIC or ROW_FORMAT=COMPRESSED may help. In current row   format, BLOB prefix of 768 bytes is stored inline.' on query. Default   database: 'XXXX

span设置宽度有效无效问题

在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/19

[javaEE] Eclipse 默认设置的换行长度

eclipse 默认设置的换行长度, 格式化代码后,经常换行,非常难看. 1.Java代码 打开Eclipse的Window菜单,然后 Preferences->Java->Code Style->Formatter->Edit ->Line Wrapping->Maximum line width:默认80 加个0,改成800就行了. 2.CSS代码 Window->Preferences->Web->CSS Files->Editor->

解决iptables和vsftpd设置的问题

解决iptables和vsftpd设置的问题 博客分类: linux/centos/ubuntu 防火墙J#工作 修改 vi /etc/sysconfig/iptables-config IPTABLES_MODULES="ip_conntrack_ftp" iptables -P INPUT DROP iptables -A INPUT -p tcp --dport 20 -j ACCEPT iptables -A INPUT -m state --state ESTABLISHED

给表格设置border还可以这样玩

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#ff0000"> <tr> <td> </td> </tr> </table> 将cellspacing设置成几,表格的border就为几,将bgcolor设置成什么颜色,表格的border就

Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dropdown-toggle').click(function(e) { e.preventDefault(); e.stopPropagation(); return false; }); Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

IE6下span右浮动换行怎么处理

IE6下span右浮动换行怎么处理:在编写新闻列表的时候,一般要求左边是新闻标题,右边是新闻发布时间.时间一般会放在<span>标签中,并将其右浮动.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /&g

解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的实用性.但是再好的程序也会有瑕疵,项目开发中就遇到了其提供的设置隐藏显示列的方法 table.fnSetColumnVis(colShowDic_key[i], true);//colShowDic_key[i]为列的索引.会多次提交刷新数据(有多少列会提交刷新多少次). 为解决这个问题尝试了很多种