如何在 Bootstrap 3 输入组中使按钮全宽？答案

【问题标题】：How to make button full width in Bootstrap 3 input-group?如何在 Bootstrap 3 输入组中使按钮全宽？
【发布时间】：2019-11-04 18:14:39
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以在 input-group 上覆盖从 display: table 到 display: block 的 CSS。在 input-group-btn 从 width: 1% 到 width:100% 和 display: block.

【讨论】：

【解决方案2】：

您可以为 Button input-group-btn 设置 100% 的宽度

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

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

您的输入组 (input-group) 使用 display: table，因此我们只需将一个“单元格”（您的跨度与类 input-group-btn）设置为 100% 的最大宽度。
您的按钮不会占用全部 100%，因为其他“单元格”（您的跨度标签）具有最小宽度、内容或/和填充。

【讨论】：

【解决方案3】：

您可以将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

【讨论】：

【解决方案4】：

您可以使用如下所示的块级按钮

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

【讨论】：