ResposiveNess div с множественным контентом

Question

Я использую Bootstrap 4. Мой HTML-код подобен приведенному ниже.

<div class="font-weight-bold col-12">
  <span>Filter :</span>
  <input type="text" class="form-control" />
</div>

Перед уменьшением размера браузера мой вывод выглядит примерно так:

После уменьшения размера браузера мой вывод выглядит примерно так:

Как сохранить оба элемента в одной строке после уменьшенияразмер браузера?

Answer 1

Вы можете сделать несколько вещей здесь:

1) избавиться от "form-control", добавить собственный класс и установить его ширину с помощью CSS

HTML

<input type="text" class="my-input" />

CSS

.my-input {
  width: 100px; // or the width you desire
}

2) Перезаписать CSS элемента внутри медиазапроса.

Где-то в начальной загрузке CSS у вас есть селектор («управления формой») внутри медиа-запроса, который дает ввод меньшей ширины.Вы можете создать свой собственный медиа-запрос и селектор и перезаписать его.

3) Сортировка комбинации обоих.Вы можете просто добавить класс для ввода

<input type="text" class="form-control my-input" />

, а затем добавить CSS в соответствии с шириной экрана.

Это может быть не так уж и элегантно - но вы также можете использовать !important по ширине, и тогда оно не будет перезаписано при изменении размера экрана.

Как:

.my-input {
  width: 100px !important; //again - not elegant, but will do the work
}

Answer 2

Введите CSS для ввода в виде:

input {
  width: calc(100% - 55px)
}

HTML

<div class="font-weight-bold">
  <span>Filter :</span>
  <input type="text" class="form-control" />
</div>

55px - это ширина, выделенная для метки.Ввод будет регулироваться в соответствии с экраном и шириной метки без использования начальной загрузки.

Answer 3

Попробуйте вот так:

<div class="font-weight-bold col-lg-12 col-md-12 col-sm-12"> // use fullwidth for large, medium and small devices
  <span>Filter :</span>
  <input type="text" class="form-control" />
</div>

Подробнее о системе начальной загрузки можно прочитать здесь .