css - 引导 -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。