扩展@kravits88答案:

这将拉伸按钮以适应整个宽度:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

如果你把你的按钮放在一个类为“btn-group”的div中，里面的按钮将伸缩到与最大的按钮相同的大小。

eg:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

引导按钮组

引导 5+

使用网格列来设置宽度，并使用边距结束工具来设置它们之间的边距:

<div>
  Here are two buttons: 
  <button class="btn btn-primary col-3 me-2">PressMe</button>
  <button class="btn btn-primary col-3">PressMeToo</button>
</div>

扩展@kravits88答案:

这将拉伸按钮以适应整个宽度:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

如果父容器是响应式的，那么块宽度按钮很容易变成响应式按钮。我认为使用固定宽度和更详细的选择器路径的组合而不是!很重要，因为:

1)这不是一个hack(设置min-width和max-width相同是hack)

2)不使用!important标签，这是不好的做法

3)使用宽度，因此将非常可读，任何了解CSS中的级联工作原理的人都将看到发生了什么(可能会为此留下CSS评论?)

4)结合你的选择器，适用于你的目标节点，以提高准确性

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

您还可以在按钮上使用.btn-block类，以便它扩展到父类的宽度。

如果父元素是一个固定宽度的元素，按钮将展开以获取所有宽度。可以将现有标记应用于容器，以确保固定/流动按钮只占用所需的空间。

<div class="span2">
    <p><button class="btn btn-primary btn-block">Save</button></p>
    <p><button class="btn btn-success btn-block">Download</button></p>
</div>

<剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <剧本剧本src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < / > <铁路链接href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”=“stylesheet - > < div级= span2”> <p><巴顿级=“btn btn-primary btn-block”>保存</按钮></p <p><巴顿级=“btn-success btn-block”>下载</按钮></p> < / div >