Bootstrap 3: Группа ввода в форме navbar занимает всю ширину

Итак, вот что выглядит набережная типа начальной загрузки.

HTML по умолчанию:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

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

HTML:

<form class="navbar-form navbar-left" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
  </div>
</form>

Я читал некоторые решения для этого, но я хочу избежать использования хаков, например style: "width: 200px;"

Любые решения? Большое спасибо заранее.

Ответ 1

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

Добавить класс navbar-input-group в форму

<form class="navbar-form navbar-left navbar-input-group" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

CSS (при необходимости укажите в медиа-запросе):

.navbar-input-group {
  font-size: 0px; /*removes whitespace between button and input*/
}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

или SCSS (сохраняет целостность):

@import "bootstrap-variables";

.navbar-input-group {
  @media (min-width: $screen-sm) {
    font-size: 0px; /*removes whitespace between button and input*/

    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: 0px;
    }
  }
  @media (max-width: $screen-xs-max) {
    margin-top:0px;
    margin-bottom:0px;

    .btn {
      width:100%;
    }
  }
}

Результат:

Для ясности я нацеливаю элементы потомка в CSS. Это не самый эффективный способ нацеливания элементов CSS. Если вам нравится этот ответ, подумайте о том, чтобы указать имена и имена уникальных классов ввода и кнопки без их селекторов в вашем CSS (читайте: http://csswizardry.com/2011/09/writing-efficient-css-selectors/)

Ответ 2

Тот факт, что ваше решение занимает всю ширину, - это хорошо. Теперь используйте вложенные строки и столбцы, чтобы определить, сколько пространства вы действительно хотите использовать в этой строке поиска.

<div class="row">
    <div class="col-md-3">
        <form class="navbar-form navbar-left" role="search">
         <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for awesome stuff">
            <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
          </div>
        </form>
    </div>
</div>

Ответ 3

Изменить: я не заметил, что OP попросил решение без ручной установки ширины в css. Тем не менее, я думаю, что это хорошая альтернатива, если вы не возражаете против максимальной ширины. И он устанавливает максимальную ширину для высоких разрешений, поэтому вы сохраняете нормальное поведение на планшете и мобильном устройстве.

1) Добавьте navbar-searchbox в div.input-group:

<form class="navbar-form navbar-left" role="search">
  <div class="input-group navbar-searchbox">
    <input type="text" class="form-control">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

2) Поместите это в ваш .lass файл.

@media (min-width: @screen-sm-min) {
  .navbar-searchbox {
    max-width: 250px;
  }
}

3) Пройдите по комнате, выкрикивая победу!

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

Ответ 4

Я предпочитаю обрабатывать элемент формы как обычно, и просто фиксировал его пример с помощью этого правила CSS:

.navbar-form .input-group {
    display: inline-block;
    width: auto;
    vertical-align: middle;

    .form-control,
    .input-group-btn {
        float: left;
    }
}