Как изменить отступ, когда строка меняет количество столбцов?

Question

У меня есть два элемента (входы) с фиксированным размером. Эти два элемента каждый в своем собственном столбце. Мне нужно изменить заполнение столбцов, когда отображение настолько мало, что каждый столбец находится в новой строке. Я предпочитаю bootstrap решение. Есть ли что-то подобное?:

<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; столбцы в две строки - отступ = 15px

Answer 1

В этом примере с .px-sm-2 у вас будет заполнение 2rem по оси X на устройстве больше ≥576px, если нет, у вас будет заполнение 0. (в зависимости от точки останова см. bootstrap документы )

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

Answer 2

Проверьте bootstrap документы для заполнения. https://getbootstrap.com/docs/4.4/utilities/spacing/

Вы должны иметь возможность использовать класс p, как и класс col, следующим образом: {свойство} {сторон} - {размер} для xs и {свойство} { сторон} - {точка останова} - {размер} для sm, md, lg и xl.

Например, если вы хотите заполнить нулевым левым отступом для среднего экрана, ваш класс будет pl-md-0

Answer 3

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

проверить эту документацию