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

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

  <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>

check this documentation

Answer 2

在此示例中，使用.px-sm-2，大于576像素的设备在X轴上将具有2rem填充，如果没有，则将具有0填充。 （基于断点，请参见bootstrap docs）

<div class="col-auto px-0 px-sm-0">
   <!-- some element of fix size  (input) here -->
</div>

Answer 3

查看引导文档进行填充。https://getbootstrap.com/docs/4.4/utilities/spacing/

您应该可以通过以下方式像col类一样使用p类：用于xs的{property} {sides--size}和用于sm，md，lg和xl的{property} {sides- {breakpoint}-{size}。

例如，如果您希望中型屏幕的左填充为零，则您的班级为pl-md-0