css - 将 Bootstrap 的按钮扩展到其包含的 div 的 100%

Question

如何让 bootstrap 自扩展按钮的宽度达到其父按钮的 100%，而不单独调整每个按钮的宽度？

例如，如果我有 8 个按钮，100% 容器宽度/8 个按钮 = 每个按钮 12% 宽度。

我想:

1. 避免指定每个按钮的宽度(今天我有 8 明天我会有 20 个)。

2. 将整个 .btn-group 的子按钮调整到中心(如果您仔细观察，您会发现容器内的按钮出于某种原因左对齐)。

.btn-group {
  width: 100%;
}
.btn-group>input.btn {
  width: 12%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container panel panel-default">
  <div class="btn-group">
    <input type="button" class="btn btn-primary btn-responsive" value="A" />
    <input type="button" class="btn btn-primary btn-responsive" value="AB" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABC" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCDE" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABC" />
    <input type="button" class="btn btn-primary btn-responsive" value="AB" />
  </div>

  <br/>
  <br/>
  <br/>

  <p>the buttons above don't take full width of the container</p>
</div>

示例 CSS:

.btn-group {
  width: 100%;
}

.btn-group>input.btn {
  width: 12%;
}

Codepen

Answer 1

使用 flexbox 最容易实现这种效果。

.btn-group {
  display: flex;
  justify-content: center;
}

.btn-group > input.btn {
  flex-grow: 1;
}

根据您的目标浏览器，您可能需要添加前缀