Как я могу форсировать рендеринг формы с помощью Bootstrap?

Question

Доброе утро,

В настоящее время я создаю классическое приложение todoList с HTML5, CSS3 и JS в дополнение к использованию среды Bootstrap 4.3.1.Недостаток, который у меня есть, заключается в том, что когда я перерисовываю экран, чтобы проверить адаптивность, и я собираюсь достичь ширины 768 пикселей, кнопка «Добавить элемент» сжимается, и слова помещаются друг на друга.Можно принудительно сделать так, чтобы этого не происходило и на кнопке всегда были слова с кнопкой с цифрой «2».

С другойВ соответствии с конфигурацией, которую я имею, когда экран уменьшается ниже 768 пикселей, как видно на втором изображении, и текстовое поле, и кнопка располагаются один под другим.Как я мог бы сделать, чтобы, когда это происходит, между ними генерировалось поле, которое не было бы так склеено, как краевое поле, чтобы они не прилипали к краю страницы.

Спасибо за поддержку.

Answer 1

Для вашего первого вопроса о том, как заставить кнопку занимать всю ширину ее содержимого, вы можете использовать компонент входной группы в Bootstrap 4. В частности эта часть.

Вот пример CodePen.

В качестве альтернативы вы можете изменить класс вашей кнопки рядом со входом с col-md-2 на col-md-auto.Затем вы также должны изменить класс на вашем входе, просто удалите -10.Это может привести к следующему:

<form id="itemForm" class "row my-3">
  <input type="text" id="itemInput" class="col-md form-control" placeholder="Tarea...">
  <button class="btn btn-green col-md-auto" type="submit">Agregar Item</button>
</form>

---

Другая проблема легко решается добавлением служебного класса заполнения к <div class="container-fluid">.Например:

<div class="container-fluid px-5">
 ...
</div>

Это добавляет заполнение по оси X (слева и справа).Значение варьируется от 0-5.

Answer 2

удалить класс строки из формы

<form id="itemForm" class="my-3">