时间戳

首页 > 解决方案 > 行更改列数时如何更改填充？

html - 行更改列数时如何更改填充？

问题描述

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

<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

标签： htmlcssangularbootstrap-4grid

解决方案

查看引导文档以获取填充。 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

推荐阅读