css - 带 Bootstrap 的固定宽度按钮

Question

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

还有什么是扩展 Bootstrap 的正确方法？

Answer 1

您还可以使用.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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<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>

Answer 2

为此，您可以提出一个您认为两个按钮都可以的宽度，然后创建一个具有该宽度的自定义类并将其添加到您的按钮中，如下所示：

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/

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

Answer 3

如果您将按钮放置在具有“btn-group”类的 div 中，则里面的按钮将拉伸到与最大按钮相同的大小。

例如：

<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> 

引导按钮组

Answer 4

对于您的按钮，您可以为那些具有指定最小宽度和最大宽度的特殊按钮类创建另一个 CSS 选择器。所以如果你的按钮是

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

在您的 Bootstrap CSS 文件中，您可以创建类似

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

这样，即使您有响应式设计，它也应该始终保持 80 像素。

至于扩展 Bootstrap 的正确方法，看看这个线程：

扩展引导程序

Answer 5

使用 BS 4 和 BS 5，您还可以使用sizing，并应用 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>

Answer 6

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);

Answer 7

扩展@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>

Answer 8

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

1）它不是黑客（设置最小宽度和最大宽度相同但是黑客）

2）不使用 !important 标签，这是不好的做法

3) 使用宽度，所以可读性很强，任何了解 CSS 中级联如何工作的人都会看到发生了什么（也许为此留下 CSS 评论？）

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

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

Answer 9

引导程序 5+

使用网格列设置宽度，使用边距结束实用程序设置它们之间的边距：

<div>
  Here are two buttons: 
  <button class="btn btn-primary col-3 me-2">PressMe</button>
  <button class="btn btn-primary col-3">PressMeToo</button>
</div>

Answer 10

解决问题的最佳方法是使用具有所需列宽 的按钮块btn-block 。

<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>

Answer 11

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

    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);
    });
}

它就像一个魅力。

Answer 12

刚遇到同样的需求，对定义固定宽度不满意。

使用 jquery 也是如此：

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

Answer 13

这可能是一个愚蠢的解决方案，但我一直在寻找解决这个问题的方法并且变得懒惰。

无论如何，使用 input class="btn..." ... 而不是 button 并用空格填充 value= 属性，以便它们的宽度相同，效果很好。

例如：

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

我很久没有使用引导程序了，也许有一个很好的理由不使用这种方法，但我想我不妨分享一下