当行改变列数时如何改变填充？

Question

我有两个具有固定大小的元素（输入）。这两个元素各自位于其自己的列中。当显示太小以至于每列都在新行中时，我需要更改列的填充。我更喜欢引导解决方案。有这样的事吗？：

<div class="row">

  <div class="col pr-0">

  ...

这是我的代码示例：

<div class="row">

  <div class="col">

    <!-- some element of fix size (input) here -->

  </div>

  <div class="col-auto">

    <!-- some element of fix size  (input) here -->

  </div>

</div>

我需要实现：一行中的列 - padding=0px; 两行列 - padding=15px

Answer 1

您应该能够像 col 类一样按以下方式使用 p 类：{property}{sides}-{size} 用于 xs，{property}{sides}-{breakpoint}-{size} 用于 sm、md， lg 和 xl。例如，如果您想要中屏幕的左填充为零，您的类将是 pl-md-0

Answer 2

  <div class="col">    <!-- some element of fix size (input) here -->  </div>    <!-- based on breakpoint add { sm, md, or other } -->  <div class="col-auto p-y-sm-3">    <!-- some element of fix size  (input) here -->  </div></div>

Answer 3

在此示例中，.px-sm-2您将在大于 ≥576px 的设备上的 X 轴上有 2rem 填充，否则您将有 0 填充。<div class="col-auto px-0 px-sm-0">   <!-- some element of fix size  (input) here --></div>