Bootstrap是否支持固定宽度的按钮?目前，如果我有2个按钮，“保存”和“下载”，按钮大小根据内容而变化。
还有什么是正确的方式扩展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”的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>
引导按钮组
在这里，我通过比较按钮组元素中的按钮找到了一个解决方案。简单的解决方法是获取宽度最大的按钮，并将宽度设置为其他按钮。所以它们的宽度是相等的。
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);
对于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>
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>
