一个bootstrap常遇到的问题

今天一个小哥哥终于帮我解决了这个一直以来就存在的问题:就是bootstrap中栅格里面每列都会默认带15px的内边距;有了这个,如果给每一栏加上边框,左右就会超出15px,如下图:

1.jpg

图中,所有的东西都被一个container盒子包住,其中上面是一个header (为了看对比效果)下面是一个栅格布局,分为3列。以前我html结构就是这样的。

2.png

这样的结构写出来效果就是上面图片的那种样子。左右超出了15px,看着与header没有对齐,很不美观。这个问题从学bootstrap就一直困扰着我,用了百度中很多方法都不能解决。今天太高兴了,问了一个小哥哥,居然解决了。不多说,上代码。

3.png

图中的意思就是给列在加一个的父亲,再把每列的内边距清零,这样就可以抵消内边距啦。哈哈 这样是不是很简单啊,自己怎么就没有想到啊,伙伴们,不许勿喷噢。如果还有其他方法也可以给我说一说哦。

4.png

(ps最后的图稍微调整了一下下,看着要鲜明一点点。。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,974评论 3 184
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • 大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。 1.背景介绍 Bootst...
    inh_阅读 812评论 0 2
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,163评论 0 42
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,198评论 19 139