Html 如何在Bootstrap3输入组中使按钮全宽？

我正在尝试使用

输入组

来显示数量的输入，“数量”标签和“添加到篮子”按钮-所有这些都是内联的<代码>输入组按预期全宽显示

如何使用固定宽度（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：

---

您可以将输入组上的CSS从display:table覆盖到display:block。在输入组btn上，从宽度：1%到宽度：100%，并显示：块。

您可以为按钮

输入组btn

提供100%的宽度

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

您的输入组（

Input Group

）使用

display:table

，因此我们只需将一个“单元格”（您与类

输入组btn的跨度）设置为最大宽度100%

由于其他“单元格”（您的span标记）具有最小宽度、内容或/和填充，您的按钮将不会占据全部100%。
您可以使用
输入组
容器的
显示：表格
和其子元素的
显示：表格单元格
来完成所需的操作。例如：

.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
您可以使用块级别按钮，如下所示

按钮

<button type="button" class="btn btn-primary btn-lg btn-block"> button</button>