V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
51300520
V2EX  ›  问与答

请教前端为什么 bootstrap 的 container,row,col 栅格会搞个 15px 的 padding?

  •  
  •   51300520 · 2019-06-09 06:27:13 +08:00 · 2496 次点击
    这是一个创建于 1976 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在学习前端,bs 的 container padding 15px, row padding -15px,col 栅格又 padding 15px,OK,他这样就好比码砖一样一环一环扣起了,那为毛不索性全部 padding 0 ?它这样 15px 和-15px 相互抵消正好相扣不是脱了裤子放屁吗?作为前端初学者我看不出这样设计的好处,坏处反而是必须是 container>row>col>row 这样严格嵌套,这样才能对得整齐。 请大家告诉我他这样设计是出于什么考虑的?

    6 条回复    2019-06-09 20:34:15 +08:00
    Mutoo
        1
    Mutoo  
       2019-06-09 07:41:35 +08:00
    来源于 12 grids system 的 gutter,如果你用的是 scss 版的,这个 gutter 是可以配置的。
    ChefIsAwesome
        2
    ChefIsAwesome  
       2019-06-09 07:50:14 +08:00   ❤️ 1
    那个栅格是 gutter 宽度固定,column 宽度按比例。为了实现这样的效果,只能多套几个 div。负的 margin 是为了把两边的空白去掉。试想下三个 column,中间两个 gutter,怎么让 column 宽度是 1/3,gutter 是固定像素。你自己试试实现就知道了,只能这么做。
    learnshare
        3
    learnshare  
       2019-06-09 08:32:35 +08:00
    栅格布局的技巧之一,为了把两边多余的 15px 吃掉,达到 flex 布局的 justify-content: space-between; (等间距,两侧贴边)效果
    目的嘛,你已经讲过了——“这样才能对得整齐”
    cdwyd
        4
    cdwyd  
       2019-06-09 10:21:52 +08:00 via Android
    这个用起来也是别扭,不如设置为 0 然后自己控制来的直接
    azh7138m
        5
    azh7138m  
       2019-06-09 14:21:46 +08:00 via Android
    如楼上所说,是为了 space-between 的效果,所以在 row 上处理两边多出来的间距。
    一般来说,这种上历史的写法都会有其原因,觉得是多余,要么是不用兼容老浏览器,要么是写的少了。
    umwelt
        6
    umwelt  
       2019-06-09 20:34:15 +08:00 via Android
    兼容吧应该是
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3421 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:45 · PVG 19:45 · LAX 03:45 · JFK 06:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.