Bootstrap是否支持固定宽度的按钮?目前,如果我有2个按钮,“保存”和“下载”,按钮大小根据内容而变化。
还有什么是正确的方式扩展Bootstrap?
Bootstrap是否支持固定宽度的按钮?目前,如果我有2个按钮,“保存”和“下载”,按钮大小根据内容而变化。
还有什么是正确的方式扩展Bootstrap?
当前回答
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);
其他回答
对于您的按钮,您可以为这些特殊类型的按钮创建另一个CSS选择器,具有指定的min-width和max-width。如果你的按钮是
<button class="save_button">Save</button>
在你的引导CSS文件中,你可以创建这样的东西
.save_button {
min-width: 80px;
max-width: 80px;
}
这样,即使你有一个响应式设计,它也应该始终保持80px。
就扩展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-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);
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>
扩展@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>