html - Bootstrap 按钮组始终水平对齐

Question

Bootstrap 按钮组使它们始终在一行中，始终水平对齐。当我调整窗口大小时按钮垂直下降。

我正在寻找一种解决方案，其中无论如何按钮总是在一行中。

我已经在父 div 上应用了 style="white-space:nowrap;" 但它不起作用。

如果可能，尽量只使用 bootstrap 的内置 css 类。请保持当前的 HTML 结构不变来回答。因为这就是它在我的元素中的实现方式。

这是 Bootstrap 按钮组的最简单实现。参见 PLUNKER

代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal">
    <div class="form-group" style="white-space:nowrap;">
      <div>
        <div class="btn-group">
          <button type="button" class="btn btn-primary">
            11111
          </button>
          <button type="button" class="btn btn-success">
            22222
          </button>
          <button type="button" class="btn btn-primary">
            33333
          </button>
          <button type="button" class="btn btn-success">
            44444
          </button>
          <button type="button" class="btn btn-primary">
            55555
          </button>
          <button type="button" class="btn btn-success">
            22222
          </button>
          <button type="button" class="btn btn-primary">
            33333
          </button>
          <button type="button" class="btn btn-success">
            44444
          </button>
          <button type="button" class="btn btn-primary">
            55555
          </button>
          <button type="button" class="btn btn-success">
            44444
          </button>
          <button type="button" class="btn btn-primary">
            55555
          </button>
        </div>
      </div>
    </div>
  </div>

Answer 1

您需要覆盖 float: left; 并向父级添加 white-space: nowrap;。所以在你的 CSS 中:

.btn-group {
  white-space: nowrap;
}

.btn.btn-primary,
.btn.btn-success {
  float: none;
}

笨蛋:https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview

不过，我建议将特定类添加到 btn-group/btn-primary/btn-success，因为覆盖 Bootstrap 样式而不是仅添加自定义类是一种不好的做法。

例如:

HTML:

<div class="btn-group custom-class">
<button type="button" class="btn btn-primary custom-class">
<button type="button" class="btn btn-success custom-class">

CSS:

.btn-group.custom-class{...}
.btn.btn-primary.custom-class,
.btn.btn-success.custom-class {...}

https://plnkr.co/edit/nAZD6Hssgnep37fXU9vb?p=preview