html - 如何使用 bootstrap 3 均匀间隔三个水平对齐的按钮？

Question

如果我附上 <div>与 class="row"并给每个按钮 class="span4"按钮填满屏幕的整个宽度。

我希望每个按钮的宽度与其包含的文本一样宽，中心位于 25% , 50%和 75%的 width .

             [aaa]                        [bbb]                     [ccc]

不是

[            aaa             ][            bbbb         ][            cccc            ]

我是 bootstrap 的新手，不是 CSS 大师。

我如何实现这一目标？

我的按钮也有 class="btn-outline btn-default" ，但这不应该影响事情(我认为)。

顺便说一下，我目前正在考虑 3 个按钮，但如果任何数字的通用解决方案都同样简单，那将是受欢迎的。

Answer 1

首先，从您的类(class)来看，您似乎仍在使用 bootstrap-v2 , 尝试使用 bootstrap-v3 (v4 还处于 alpha beta[now] 阶段)，你可以用这个实现你想要的:

.row {
  border: 1px dashed red /* demo */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

更新(bootstrap-v4)

对于那些正在使用/想使用 bootstrap V4 的人，方法如下:

.row {
  border: 1px dashed red /* demo */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>