扩展@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;
}

这可能是一个愚蠢的解决方案，但我一直在寻找这个问题的解决方案，结果懒惰了。

总之，使用input class="btn…"．.． 用空格代替button和填充value=属性，这样它们的宽度都是一样的，效果很好。

例如:

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

我还没有使用bootstrap很长时间，也许有一个很好的理由不使用这种方法，但我认为我最好分享一下

对于bs4和bs5，您还可以使用大小调整，并应用w-100，以便按钮可以占用父容器的完整宽度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Using btn-block </p> <div class="container-fluid"> <div class="btn-group col" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-secondary">Left</button> <button type="button" class="btn btn-outline-secondary btn-block">Middle</button> <button type="button" class="btn btn-outline-secondary">Right</button> </div> </div> <p> Using w-100 </p> <div class="container-fluid"> <div class="btn-group col" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-secondary">Left</button> <button type="button" class="btn btn-outline-secondary w-100">Middle</button> <button type="button" class="btn btn-outline-secondary">Right</button> </div> </div>

只是遇到了同样的需求，并没有满足于定义固定宽度。

jquery也是如此:

var max =数学。马克斯($ (" # share_cancel ")。Width ()， $("#share_commit")。宽度()); $ (" # share_cancel”)。宽度(max); $ (" # share_commit”)。宽度(max); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button> . <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

如果你把你的按钮放在一个类为“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> 

引导按钮组