Бутстрап 4 встроенная форма полной ширины

У меня есть встроенная форма со строкой поиска и кнопкой поиска рядом с ней. Как я могу заставить div input-group охватывать весь столбец в Bootstrap 4 и предпочтительно без использования пользовательского CSS?

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span> 
        </div>
      </form>
    </div>
  </div>
</div>

Ответ 1

Обновлено 2018

Удалите form-inline..

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form action="" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span> 
        </div>
      </form>
    </div>
  </div>
</div>

Демо: http://www.codeply.com/go/4eu7w6KPkT

Другой вариант - ввод ширины, который укладывается вертикально на xs:

<div class="row">
        <div class="col-md-12">
            <form class="row">
                <div class="col-12 col-sm pr-sm-0">
                    <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
                </div>
                <div class="col-12 col-sm-auto pl-sm-0">
                    <input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
                </div>
            </form>
        </div>
</div>

демонстрация

Ответ 2

Bootstrap 4.3 теперь имеет сетку форм и позволяет указывать ширину столбцов. Вот так я и получил свою форму ввода и кнопку, расположенную в соответствии с желаемой шириной.

https://getbootstrap.com/docs/4.3/components/forms/#form-grid

<form class="form" method="get" action="/products">
  <div class="row">
    <div class="col-md-6 offset-md-2">
      <input type="text" class="form-control" name="search" placeholder="search products">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-outline-primary mb-2">Search</button>
    </div>
  </div>
</form>
<br>

Ответ 3

У вас есть три возможных способа реализовать следующие два варианта макета:

Смотрите мой Codeply.com, демонстрирующий все решения подробно описаны ниже...

Полноразмерная форма поиска с липкой кнопкой

Просто добавьте класс flex-fill к вашему <div class="form-group">.

Обратите внимание, что из исходного кода, приведенного выше, Bootstrap 4 изменился с input-group-btn на input-group-append чтобы кнопка прилипала к полю ключевого слова и правильно обрабатывала закругленные углы.

Наконец, я также добавил атрибут aria-label чтобы удовлетворить требования доступности для вашего примера.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group flex-fill">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with sticky button" class="form-control" aria-label="Search this site">
          <div class="input-group-append">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </div> 
        </div>
      </form>
    </div>
  </div>
</div>

Полноразмерная форма поиска с отдельной кнопкой без оболочки

Для этого решения у вас есть два варианта, в зависимости от желаемой структуры HTML и потребностей проекта.

Во-первых, вы можете удалить все div-оболочки и добавить классы flex-fill mr-2 в <input class="form-control">. Это самый простой вариант.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/o wrapper div" class="flex-fill mr-2 form-control" aria-label="Search this site">
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

Если у вас есть шанс, я бы пошел с этим решением, так как оно производит чистый HTML;)

Полноразмерная форма поиска с отдельной кнопкой с оберткой

Если вашей форме требуются некоторые <div class="input-group"> обертки (например, из-за борьбы с вашей CMS), вам придется бороться с тем, где вы размещаете классы: во-первых, замените <div class="input-group"> на <div class="flex-fill mr-2">, добавьте класс w-100 в <input class="form-control"> и, наконец, удалите оболочку <div class="input-group-append"> и переместите кнопку отправки за пределы флекс-заполнитель

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="flex-fill mr-2">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/ wrapper div" class="form-control w-100" aria-label="Search this site">
        </div>
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

мобильный

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