Устраняем проблему с шириной input в Bootstrap и MVC5

Быстрый ответ

Для того чтобы расширить текстовое поле до полной ширины в линейной форме Bootstrap, воспользуйтесь классами form-inline и w-100 для поля ввода:

<form class="form-inline">
  <input type="text" class="form-control w-100" placeholder="Поиск">
  <button type="submit" class="btn btn-primary">Найти</button>
</form>

Класс w-100 обеспечит занимание поля ввода всего доступного горизонтального пространства.

Адаптивная настройка размеров поля ввода

Для того чтобы настроить ширину поля ввода в зависимости от размера экрана, используйте адаптивные классы сетки Bootstrap, например col-md-12:

<form class="form-inline">
  <div class="col-md-12">
    <input type="text" class="form-control w-100" id="responsive-wide-input" placeholder="Поиск"/>
  </div>
  <button type="submit" class="btn btn-primary">Поиск</button>
</form>

Если требуется увеличенное поле ввода, соедините классы input-group-lg и input-group:

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Предпочитаю большой размер">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Начать</button>
  </div>
</div>

Этот код создаст поле ввода большего размера для лучшей видимости.

Оптимизация при использовании структуры form-group

Совершенствуйте выравнивание и отступы между элементами формы, обрамляя метки и управляющие элементы в form-group:

<form class="form-inline">
  <div class="form-group w-100">
    <label for="search" class="sr-only">Поиск:</label>
    <input type="text" id="search" class="form-control w-100" placeholder="Поиск">
  </div>
  <button type="submit" class="btn btn-primary">Найти</button>
</form>

Применение form-group обеспечивает оптимальное пространство для компонентов формы, совместимость с сеткой и приятный визуальный облик.

Визуализация

Если ваше текстовое поле должно занимать всю доступную горизонтальную ширину в линейной форме, визуализируйте это так:

Площадка вокзала (🚉) – [Линейная форма] Расширяем текстовое поле на всю длину: 🚂> 🚃🚃🚃 (текстовое поле на всю ширину)

Bootstrap позволяет нашей форме полностью занять ширину "площадки":

<form class="form-inline d-flex">
  <input class="form-control flex-grow-1" type="text" placeholder="Время отправления?">
</form>

С помощью класса flex-grow вы используете все свои возможности: Настройка железнодорожного пути Bootstrap: | .form-inline | 🛤️ | | .d-flex | 🚄===> | | .form-control | 🚂 | | .flex-grow-1 | === |

Возможности модели Flex

Классы flex в Bootstrap представляют собой инструмент для надежного управления компоновкой. Используйте классы d-flex и flex-fill для достижения идеального выравнивания и заполнения:

<form class="form-inline d-flex">
  <div class="flex-fill mr-2">
    <input type="text" class="form-control w-100" placeholder="Гибко, как резина">
  </div>
  <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Класс flex-fill обеспечивает заполнение всего доступного пространства полем ввода без нарушения гармонии с кнопками и другими элементами.

Добавление пользовательских стилей

Если стандартные классы Bootstrap не обеспечивают все ваши требования, вы можете добавить свои стили CSS:

.custom-full-width-input {
  width: calc(100% – 50px); /* Вычитаем ширину кнопки и отступы, учитель нашего персонального пространства */
}

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

<form class="form-inline">
  <input type="text" class="form-control custom-full-width-input" placeholder="Восприятие баланса">
  <button type="submit" class="btn btn-primary ml-2">Найти</button>
</form>

Полезные материалы

1. Формы · Bootstrap — официальная документация Bootstrap по линейным формам.
2. Формы Bootstrap — руководство на W3Schools по созданию текстовых полей на всю ширину в формах Bootstrap.
3. flex-grow | CSS-Tricks — объяснение свойства flex-grow, которое важно для создания гибких компоновок.
4. <input>: Элемент ввода (Form Input) — документация MDN Web Docs по элементу HTML <input>.
5. Понимание сеточной системы Bootstrap — подробное руководство от SitePoint по сеточной системе Bootstrap.
6. Учебnik | DigitalOcean — обучающий материал по улучшению линейных форм в Bootstrap с сайта, который ранее был известен как Scotch.io.