专栏首页Android必知必会解决bootstrap row span设置border换行的问题

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

版权声明:本文为[他叫自己Mr.张]的原创文章,转载请注明出处,否则禁止转载。 https://micro.blog.csdn.net/article/details/46291421

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 条评论
登录 后参与评论

相关文章

  • Android 必知必会 - FloatingActionButton 24.2.0 默认无水波纹效果

    版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

    他叫自己MR.张
  • 超高速前端开发工具——Emmet

    在 Sublime Text 中按 Ctrl+Shift+p 快捷键或在菜单-工具中打开“命令面板”,输入:Install Package (安装扩展)后回车,...

    他叫自己MR.张
  • Android必知必会-获取视频文件的截图、缩略图

    版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

    他叫自己MR.张
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    柳醉梦声
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • HTML5选择器

    czjwarrior
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study

扫码关注云+社区

领取腾讯云代金券