Question

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

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

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

如果可能，请尝试仅使用bootstrap的内置css类。 请按原样保留当前的HTML结构。因为这是在矿山项目中实施的方式。

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

CODE

<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;
}

plunker：https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview

虽然，我建议在btn-group / btn-primary / btn-success中添加一个特定的类，因为重写bootstraps样式而不是仅添加自定义类是一种不好的做法。

例如：

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

Answer 2

尝试显示：在父级而不是在显示屏上显示：inline-flex：btn-group上的inline-block

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal" style="">
    <div class="form-group" style="white-space:nowrap;">
      <div>
        <div class="btn-group" style="display:inline-flex;">
          <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>

Bootstrap按钮组始终水平对齐

2 个答案: