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

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


当前回答

您还可以在按钮上使用.btn-block类,以便它扩展到父类的宽度。

如果父元素是一个固定宽度的元素,按钮将展开以获取所有宽度。可以将现有标记应用于容器,以确保固定/流动按钮只占用所需的空间。

<div class="span2">
    <p><button class="btn btn-primary btn-block">Save</button></p>
    <p><button class="btn btn-success btn-block">Download</button></p>
</div>

<剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <剧本剧本src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < / > <铁路链接href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”=“stylesheet - > < div级= span2”> <p><巴顿级=“btn btn-primary btn-block”>保存</按钮></p <p><巴顿级=“btn-success btn-block”>下载</按钮></p> < / div >

其他回答

如果父容器是响应式的,那么块宽度按钮很容易变成响应式按钮。我认为使用固定宽度和更详细的选择器路径的组合而不是!很重要,因为:

1)这不是一个hack(设置min-width和max-width相同是hack)

2)不使用!important标签,这是不好的做法

3)使用宽度,因此将非常可读,任何了解CSS中的级联工作原理的人都将看到发生了什么(可能会为此留下CSS评论?)

4)结合你的选择器,适用于你的目标节点,以提高准确性

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

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

    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-block类,以便它扩展到父类的宽度。

如果父元素是一个固定宽度的元素,按钮将展开以获取所有宽度。可以将现有标记应用于容器,以确保固定/流动按钮只占用所需的空间。

<div class="span2">
    <p><button class="btn btn-primary btn-block">Save</button></p>
    <p><button class="btn btn-success btn-block">Download</button></p>
</div>

<剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <剧本剧本src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < / > <铁路链接href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”=“stylesheet - > < div级= span2”> <p><巴顿级=“btn btn-primary btn-block”>保存</按钮></p <p><巴顿级=“btn-success btn-block”>下载</按钮></p> < / div >

如果你把你的按钮放在一个类为“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);