Bootstrap是否支持固定宽度的按钮?目前,如果我有2个按钮,“保存”和“下载”,按钮大小根据内容而变化。

还有什么是正确的方式扩展Bootstrap?


当前回答

要做到这一点,你可以提出一个宽度你认为是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/

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

其他回答

要做到这一点,你可以提出一个宽度你认为是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/

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

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>

对于您的按钮,您可以为这些特殊类型的按钮创建另一个CSS选择器,具有指定的min-width和max-width。如果你的按钮是

<button class="save_button">Save</button>

在你的引导CSS文件中,你可以创建这样的东西

.save_button {
    min-width: 80px;
    max-width: 80px;
}

这样,即使你有一个响应式设计,它也应该始终保持80px。

就扩展Bootstrap的正确方式而言,看看这个线程:

延长引导

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

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

例如:

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

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