Bootstrap 3 вход-группа 100% ширина

В документации по загрузке у них есть группы ввода, которые имеют ширину 100% без дополнительной разметки: http://getbootstrap.com/components/#input-groups

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Я не могу заставить мои группы ввода охватывать 100% без явного определения width: 100% на input-group. Обратите внимание, что я немного скорректировал разметку:

<div class="input-group">
    <input class="form-control" placeholder="Auto width" />
    <div class="clear">
        <a href="#" class="glyphicon glyphicon-remove"></a>
    </div>
</div>

CSS

.clear { display: table-cell; }

Я создал скрипт для представления этой проблемы: http://jsfiddle.net/Wexcode/B9LMN/

Ответы

Ответ 1

Добавление width: 1% к входному элементу sibling фиксирует это:

.clear { width: 1%; display: table-cell; }

См. http://jsfiddle.net/Wexcode/B9LMN/2/

Ответ 2

input-group имеет свойство display: table css, а <input class="form-control" имеет свойство display: table-cell css.

<div class="input-group"> <!-- this is display: table -->
  <input type="text" class="form-control"> <!-- this is display: table-cell -->
  <span class="input-group-addon">.00</span> <!-- this is display: table-cell -->
</div>

В соответствии с ЗДЕСЬ в разделе "Важные правила стиля для таблиц" 

Width works on table cells just about how you would think it does, except when there is 
some kind of conflict. For instance if you tell the table itself to be 400px wide then the 
first cell of a three-cell row to be 100px wide and leave the others alone, that first cell
will be 100px wide and the other two will split up the remaining space.

он объясняет, что если width дочернего элемента, который имеет table-cell, определен (скажем, width: 100px), тогда следующий дочерний элемент с свойством table-cell, хотя и не определен, заполнит в остальной части пространства.

Ответ 3

Один способ получить input-group для растягивания до полной ширины, похоже, дает одну из его input-group-addon 100% ширины:

<div class="input-group" style="width:100%;">
  <span class="one input-group-addon">one</span>
  <span class="two input-group-addon">two</span>
  <span class="tre input-group-addon" style="width:100%">tre</span> <!-- here -->
  <span class="for input-group-addon">for</span>
  <span class="fiv input-group-addon">fiv</span>
  <span class="input-group-btn"> 
     <button class="btn" type="button">x</button> 
  </span>
</div>

Ответ 4

<div class="container">
<h3>Form widths</h3>

<form role="form">
  <div class="form-group">
    <label>Auto width</label>

    <div class="input-group">
      <input class="form-control" placeholder="Auto width" /> <span class=
      "input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span>
    </div>
  </div>

  <div class="form-group">
    <label>100% width</label>

    <div class="input-group" style="width: 100%">
      <input class="form-control" placeholder="100% width" /> <span class=
      "input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span>
    </div>
  </div>
</form>
</div>

Ответ 5

Если у вас есть select2 как часть вашей "входной группы", лучше создать его с параметром "разрешение":

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});