Поле ввода гибкой ширины в Bootstrap 3 Navbar

Я пытаюсь создать панель навигации, содержащую поле ввода. Я хотел бы, чтобы поле ввода занимало все свободное пространство в навигационной панели.

Следуя этому ответу, я успешно создал макет, подобный тому, что я хочу, в котором находится значок "addon" слева от поля ввода (см. здесь код).

Но: я не хочу значок рядом с полем ввода.

Следующий код управляет полем ввода:

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="input-group">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

Проблема заключается в том, что удаление <span class="input-group-addon">...</span>, чтобы избавиться от значка, уменьшает размер поля ввода и уменьшает округленные края (что менее важно. см. здесь код).

Конечно, нет смысла обертывать одно поле ввода в "группу ввода". Но удаление обертки "входной группы" заставляет поле ввода расширяться и вступать в новую строку (см. Здесь код).

Посмотрев на Bootstrap.css, я попытался создать новый класс css, который имитирует соответствующий код класса input-group. Это возвращает исходное поле inline в навигационной панели, но все равно не расширяет его, чтобы занять все свободное пространство (см. Здесь код).

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

Необходимая совместимость с браузером: Chrome, Firefox, IE8 +

Ответы

Ответ 1

Ну, большинство людей не использовали дизайн с таблицами, но в 99 году, когда я начал, таблицы создали макеты, и мы использовали spacer.gifs и все виды дерьма для дизайна. Когда у вас есть дисплей: таблица на контейнере и дисплей: table-cell на содержимом внутри него, так как .form-control пуст, должно быть что-то еще, чтобы заставить ширину элемента занимать пространство, или он будет действовать как пустая ячейка. Таким образом, вы должны иметь пустой диапазон с некоторым дополнением, чтобы заставить его.

http://jsbin.com/aXOZEXi/1 - Bootstrap 3.0 - 3.1

http://jsbin.com/aXOZEXi/2/edit - Bootstrap 3.2

.test {
  display:table;
}

.test > .form-control {
  display: table-cell;
  margin-left:-3px;
}

.test > span {
  display: table-cell;
  width:1%;
  padding:0 3px;
}

HTML

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

Ответ 2

Замените этот html: (внесены изменения в глификон-поиск глифов и фоновый цвет, граница входной группы-аддонов) Сделали круглые края тоже:)

<div class="container">

<nav class="navbar navbar-default" role="navigation">
    <div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Some Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar-collapsible">

        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>

        <div class="navbar-form navbar-right btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-default">Button 2</button>
            <button type="button" class="btn btn-default">Button 3</button>
        </div>

        <form class="navbar-form">
            <div class="form-group" style="display:inline;">
                <div class="input-group">
                  <span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
                  <input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
                </div>
            </div>
        </form>

    </div>

</div>
</nav>
</div>

Работал очень тяжело, чтобы добраться до того, что вам нужно. надеюсь, вы оцените:)

Ответ 3

Это поможет вам в значительной степени, где вы хотите быть

<div class="form-group" style="display:inline;">
    <div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
        <input class="form-control" type="text" placeholder="Search">
    </div>
</div>

Он не заполнит ровно все пространство, но оно заполнит большую часть его и центрирует окно поиска, чтобы оно не выглядело неуместным. Добавленный более динамический размер столбца на маленьком экране использует выпадающее меню, чтобы я изменил размер окна, чтобы он соответствовал экрану. чтобы создать полностью ответную страницу, как вы описываете, вы должны, вероятно, вложить все внутри сетки, потому что col -? -? не фиксированная ширина - это процентная ширина на основе контейнера.