【问题标题】:Negative left and right margin of .row class in BootstrapBootstrap中.row类的负左右边距
【发布时间】:2017-12-13 13:52:34
【问题描述】:

只是出于好奇,为什么 bootstrap 使用 -15px 左右 margins 会取消 .container.container-fluid 类上的 15px 左右 padding
为什么要设置 padding,然后在 child 上以负边距取消它?

【问题讨论】:

    标签: css twitter-bootstrap


    【解决方案1】:

    行上的负边距可避免由于第一列的填充而留下的空白。如果没有它,整个布局看起来会有点缩进。

    【讨论】:

    • 但是容器上有 15px 的内边距。这是为什么?为什么不改成这样:.container { padding-left: 0;填充权:0; } .row {margin-left: 0;右边距:0; }
    • 列中的左右填充是存在的,因此我们在列之间有一个装订线,一个分隔符。顺便说一句,Bootstrap 提供了一个自定义构建选项,以便我们可以根据需要更改这些值。
    【解决方案2】:

    Official Bootstrap Website所说:

    是列的包装器。每列都有水平的padding称为排水沟)用于控制它们之间的空间。这个padding 然后在带有负margins 的行上被抵消。这样一来,列中的所有内容在视觉上都在左侧对齐。

    【讨论】: