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

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>

在这里，我通过比较按钮组元素中的按钮找到了一个解决方案。简单的解决方法是获取宽度最大的按钮，并将宽度设置为其他按钮。所以它们的宽度是相等的。

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

这招很管用。

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

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

例如:

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

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

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

引导按钮组

您还可以在按钮上使用.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 >

Best way to the solution of your problem is to use button block btn-block with desired column width. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-12"> <button class="btn btn-primary btn-block">Save</button> </div> <div class="col-md-12"> <button class="btn btn-success btn-block">Download</button> </div>