防止引导按钮组损坏答案

【问题标题】：Prevent bootstrap button groups from breaking防止引导按钮组损坏
【发布时间】：2014-06-03 18:19:26
【问题描述】：

当空间较小时，如何防止引导按钮组合分成 2 行？

我正在尝试使用以下引导代码：

   <div class="btn-group" style=" width:100px ;">
        <button type="button" class="btn btn-default" style=" width:30px;">-</button>
        <input type="text" class="form-control" style="width:30px;">   
        <button type="button" class="btn btn-default" style=" width:30px;"> +</button>
    </div>

它看起来像：

【问题讨论】：

添加额外的内联样式并更改宽度，例如<div class="btn-group" style="width:300px">
仍然无法正常工作。我编辑了原始帖子。

标签： css twitter-bootstrap twitter-bootstrap-3 frontend twitter-bootstrap-2

【解决方案1】：

这对我有用，将按钮组变成一个弹性项目（默认情况下它不换行）：

.btn-group {
  display: flex;
}

我在这里看到了这个，还有更多选择： https://github.com/twbs/bootstrap/issues/9939

【讨论】：