Предлагает ли BS4 средство уменьшения размера .input-group на различных устройствах

Question

Я рассчитываю размер входной группы BS4, как и когда она загружается на различные устройства. Вроде как, как вы можете сказать col, что он должен отображать на разных экранах. Т.е.

<div class="col-12 col-md-6 col-lg-4"></div>

Я хочу сделать что-то похожее на мобильных устройствах, т.е. на настольном компьютере .input-group-lg на мобильном .input-group-sm et c.

Это то, что BS4 может сделать? (Я не вижу упоминаний об этом в документации?)

Вот пример jsfiddle с примером, если это поможет.

Answer 1

Я только что создал два пользовательских класса для input-group изменения размера для small, medium и large экрана.
1st для маленький + средний экран типа .input-group- sm-md класс.
2nd для маленький + средний + большой экран типа .input-group-sm-md-lg класс.

Я следую breakpoint из Bootstrap4.
До c Ссылка: https://getbootstrap.com/docs/4.4/layout/overview/#responsive - точки останова

Note: проверка на Full page из окна сниппета и измените размер браузера, чтобы проверить группу ввода resize reflection.

Надеюсь, нижеприведенный фрагмент поможет вам.

@media(min-width: 991px){
  /*Class for small + medium &large screen*/
  .input-group-sm-md-lg>.custom-select,
  .input-group-sm-md-lg>.form-control:not(textarea) {
    height: calc(1.5em + 1rem + 2px);
  }
  .input-group-sm-md-lg>.custom-select,
  .input-group-sm-md-lg>.form-control,
  .input-group-sm-md-lg>.input-group-append>.btn,
  .input-group-sm-md-lg>.input-group-append>.input-group-text,
  .input-group-sm-md-lg>.input-group-prepend>.btn,
  .input-group-sm-md-lg>.input-group-prepend>.input-group-text {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }
}
@media(max-width: 575px){
  .input-group-sm-md-lg>.custom-select,
  .input-group-sm-md-lg>.form-control:not(textarea),
  .input-group-sm-md>.custom-select,
  .input-group-sm-md>.form-control:not(textarea){
    height: calc(1.5em + .5rem + 2px);
  }
  .input-group-sm-md-lg>.custom-select,
  .input-group-sm-md-lg>.form-control,
  .input-group-sm-md-lg>.input-group-append>.btn,
  .input-group-sm-md-lg>.input-group-append>.input-group-text,
  .input-group-sm-md-lg>.input-group-prepend>.btn,
  .input-group-sm-md-lg>.input-group-prepend>.input-group-text,
  /*Class small+medium screen*/
  .input-group-sm-md>.custom-select,
  .input-group-sm-md>.form-control,
  .input-group-sm-md>.input-group-append>.btn,
  .input-group-sm-md>.input-group-append>.input-group-text,
  .input-group-sm-md>.input-group-prepend>.btn,
  .input-group-sm-md>.input-group-prepend>.input-group-text{
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container my-3">
  <div class="row">
    <div class="col-sm-12">
      <form action="https://stackoverflow.com/users/7052927/raeesh-alam?tab=profile">
        <div class="input-group mb-3 input-group-sm-md">
          <input class="form-control" type="text" placeholder="input-group-sm-md">
          <span class="input-group-append">
            <button type="submit" class="btn btn-primary">Search</button>
          </span>
        </div>
        <div class="input-group mb-3 input-group-sm-md-lg">
          <input class="form-control" type="text" placeholder="input-group-sm-md-lg">
          <span class="input-group-append">
            <button type="submit" class="btn btn-primary">Search</button>
          </span>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 2

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" required>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="form-group">
            <label>Price</label>
            <input type="text" class="form-control">
        </div>
    </div>
</div>