Как сделать кнопку полной ширины во входной группе Bootstrap 3?

Question

Я пытаюсь использовать input-group для отображения ввода для количества, "Кол-во".ярлык и кнопка «Добавить в корзину» - все встроенные.input-group идет на полную ширину, как и ожидалось.

Как сделать ввод с фиксированной шириной (40 пикселей) и сделать кнопку полной шириной?Поведение по умолчанию - полная ширина для ввода (не кнопка).в моем случае это бесполезно, так как я хочу, чтобы ввод был для небольшого количества и как можно больше кнопки.

<div class="input-group">
  <input type="text" class="form-control" aria-label="Amount (rounded to the nearest dollar)" style="width: 40px; float: right;">
  <span class="input-group-addon">Qty.</span>
  <span class="input-group-btn">
    <button aria-label="Add" name="inWarenkorb" type="submit" value="Add" class="submit btn btn-primary" style="width:100%">
      <span>Add to basket</span>
    </button>
    </span>
</div>

JSFIDDLE: https://jsfiddle.net/d53g68hw/

Answer 1

Вы можете присвоить кнопке input-group-btn ширину 100%

.input-group-btn{
 width: 100%
}

https://jsfiddle.net/ex7rbhpw/1/

Ваша группа ввода (input-group) использует display: table, поэтому мы просто устанавливаемодна «ячейка» (ваш промежуток с классом input-group-btn) до максимальной ширины 100%.
Ваша кнопка не займет все 100%, потому что другие "ячейки" (ваши span-теги) имеют минимальную ширину, содержимое или / и отступы.

Answer 2

Вы можете выполнить то, что ищете, используя display: table для контейнера input-group и display: table-cell для его дочерних элементов.Пример:

.input-group > * {  
  display:table;
  width:100%;
}

.input-group > * {  
  display: table-cell;
}

.input-group > .form-control, .input-group > .input-group-addon {
  width: 40px;
}
.input-group > .input-group-btn, .input-group > .input-group-btn > button {
  width: 100%;
}

HTH

Answer 3

Вы можете переопределить CSS для группы ввода из display: table to display: block.на input-group-btn от ширины: 1% до ширины: 100% и отображения: блок.