css - Bootstrap -4 填充

Question

我正在使用 bootstrap 4 填充功能。默认情况下，bootstrap4 中的 col 或 col-12 类在左侧和右侧应用 15px 填充。我想为移动设备设置左右padding 0，所以使用下面的代码

<div class="col col-12 p-0"></div>

由于 Bootstrap-4 是移动优先，我认为 p-0 只会应用于超小的屏幕，但不幸的是，这个 p-0 似乎适用于我的所有屏幕尺寸。有没有办法让我只能将 p-0 用于超小型移动设备或 sm 设备。对于移动桌面，应应用左侧和右侧默认的 15px 内边距。

谢谢。

Answer 1

引导网格的工作方式是，如果将 .col 放入 .row 中，则该行的左右边距为负，吸收了列的边距。

但是如果你仍然想在小屏幕上有 0 内边距，在中屏幕上有一些内边距，你可以这样做:

<div class="col-12 px-0 px-md-3"></div>

“x”表示仅左右填充，因为列仅在左侧和右侧具有填充。默认情况下，“3”为您提供 1rem，即 16px，最接近 15px。