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);
});
}
这招很管用。
其他回答
要做到这一点，你可以提出一个宽度你认为是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/
您可以使用创建的自定义类，并将其放置在您自己的样式表中，该样式表在引导样式表之后加载。我们这样做是因为您在引导样式表中所做的任何更改都可能在更新框架时意外丢失，我们还希望您的更改优先于默认值。
只是遇到了同样的需求，并没有满足于定义固定宽度。
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>
对于您的按钮，您可以为这些特殊类型的按钮创建另一个CSS选择器，具有指定的min-width和max-width。如果你的按钮是
<button class="save_button">Save</button>
在你的引导CSS文件中，你可以创建这样的东西
.save_button {
min-width: 80px;
max-width: 80px;
}
这样，即使你有一个响应式设计，它也应该始终保持80px。
就扩展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>
在这里，我通过比较按钮组元素中的按钮找到了一个解决方案。简单的解决方法是获取宽度最大的按钮，并将宽度设置为其他按钮。所以它们的宽度是相等的。
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);
});
}
这招很管用。
