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>

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

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

例如:

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

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

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

    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);
    });
}

这招很管用。

btn-group-justified和btn-group只适用于静态内容，但不适用于动态创建的按钮，在CSS中固定的按钮是不实际的，因为它保持相同的宽度，即使所有的内容都很短。

我的解决方案: 将相同的类放入按钮组，然后循环到所有按钮，获得最长按钮的宽度，并将其应用于所有按钮

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

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

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>

要做到这一点，你可以提出一个宽度你认为是ok的按钮，然后创建一个自定义类的宽度，并添加到你的按钮，如下所示:

CSS

.custom {
    width: 78px !important;
}

然后我可以使用这个类并像这样将它添加到按钮中:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

演示:http://jsfiddle.net/yNsxU/

您可以使用创建的自定义类，并将其放置在您自己的样式表中，该样式表在引导样式表之后加载。我们这样做是因为您在引导样式表中所做的任何更改都可能在更新框架时意外丢失，我们还希望您的更改优先于默认值。