行更改列数时如何更改填充？答案

【问题标题】：How to change padding when row change number of columns?行更改列数时如何更改填充？
【发布时间】：2020-06-17 19:16:01
【问题描述】：

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

<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

【问题讨论】：

你想在单独的行上显示两列吗？？
基于响应行为（取决于显示大小），第二列自动“跳转”到新行。我不想改变这种行为。发生这种情况时只需要更改填充。

标签： html css angular bootstrap-4 grid

【解决方案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

【讨论】：

【解决方案2】：

在这个使用.px-sm-2 的示例中，您将在大于 ≥576px 的设备上的 X 轴上拥有 2rem 填充，否则您将拥有 0 填充。（基于断点，见bootstrap docs）

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

【讨论】：

【解决方案3】：

查看引导文档以了解填充。 https://getbootstrap.com/docs/4.4/utilities/spacing/

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

例如，如果您希望中等屏幕的左填充为零，您的类将是 pl-md-0

【讨论】：