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

Question

如果我用<div>with 括起来class="row"并给每个按钮class="span4"按钮填充屏幕的总宽度.

我希望每个按钮只有一样宽,它包含的文本,与中心处于25%,50%和75%的width.

             [aaa]                        [bbb]                     [ccc]

不

[            aaa             ][            bbbb         ][            cccc            ]

我是bootstrap的新手而不是CSS大师.

我该如何实现这一目标？

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

顺便说一句,我目前正在考虑3个按钮,但如果任何数字的通用解决方案同样容易,那将是受欢迎的.

Answer 1

首先,你的类似乎仍在使用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>