CSS 带 Bootstrap 的固定宽度按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11050269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed width buttons with Bootstrap
提问by aWebDeveloper
Does Bootstrap support fixed width buttons? Currently if I have 2 buttons, "Save" and "Download", the button size changes based on content.
Bootstrap 是否支持固定宽度的按钮？目前，如果我有 2 个按钮，“保存”和“下载”，按钮大小会根据内容而变化。
Also what is the right way of extending Bootstrap?
另外，扩展 Bootstrap 的正确方法是什么？
回答by Kami
You can also use the .btn-blockclass on the button, so that it expands to the parent's width.
您还可以.btn-block在按钮上使用该类，以便它扩展到父级的宽度。
If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.
如果父元素是固定宽度元素，则按钮将展开以占据所有宽度。您可以将现有标记应用于容器以确保固定/流动按钮仅占用所需的空间。
<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>回答by Andres Ilich
To do this you can come up with a width you feel is ok for both buttons and then create a custom class with the width and add it to your buttons like so:
为此，您可以为两个按钮设置一个您认为合适的宽度，然后创建一个具有该宽度的自定义类并将其添加到您的按钮中，如下所示：
CSS
CSS
.custom {
width: 78px !important;
}
I can then use this class and add it to the buttons like so:
然后我可以使用这个类并将其添加到按钮中，如下所示：
<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>
Demo: http://jsfiddle.net/yNsxU/
演示：http: //jsfiddle.net/yNsxU/
You can take that custom class you create and place it inside your own stylesheet, which you load after the bootstrap stylesheet. We do this because any changes you place inside the bootstrap stylesheet might get accidentally lost when you update the framework, we also want your changes to take precedence over the default values.
您可以使用您创建的自定义类并将其放置在您自己的样式表中，您可以在引导样式表之后加载该样式表。我们这样做是因为当您更新框架时，您放置在引导样式表中的任何更改都可能会意外丢失，我们还希望您的更改优先于默认值。
回答by kravits88
If you place your buttons inside a div with class "btn-group" the buttons inside will stretch to the same size as the largest button.
如果您将按钮放在类为“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>
回答by Marc
For your buttons, you can create another CSS selector for those special classes of buttons with a specified min-width and max-width. So if your button is
对于您的按钮，您可以为那些具有指定最小宽度和最大宽度的特殊按钮类创建另一个 CSS 选择器。所以如果你的按钮是
<button class="save_button">Save</button>
In your Bootstrap CSS file you can create something like
在您的 Bootstrap CSS 文件中，您可以创建类似
.save_button {
min-width: 80px;
max-width: 80px;
}
This way it should always stay 80px even if you have a responsive design.
这样，即使您有响应式设计，它也应始终保持 80px。
As far as the right way of extending Bootstrap goes, Take a look at this thread:
至于扩展 Bootstrap 的正确方法，看看这个线程：
回答by Prakash G. R.
With BS 4, you can also use the sizing, and apply w-100 so that the button can occupy the complete width of the parent container.
使用 BS 4，您还可以使用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>回答by Bhojendra Rauniyar
Expanding @kravits88 answer:
扩展@kravits88 答案：
This will stretch the buttons to fit whole width:
这将拉伸按钮以适应整个宽度：
<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>
回答by Dards
btn-group-justified and btn-group only work for static content but not on dynamically created buttons, and fixed with of button in css is not practical as it stay on the same width even all content are short.
btn-group-justified 和 btn-group 仅适用于静态内容，但不适用于动态创建的按钮，并且在 css 中使用 of button 固定是不切实际的，因为即使所有内容都很短，它也保持相同的宽度。
My solution: put the same class to group of buttons then loop to all of them, get the width of the longest button and apply it to all
我的解决方案：将相同的类放入一组按钮，然后循环到所有按钮，获取最长按钮的宽度并将其应用于所有按钮
var bwidth=0
$("button.btnGroup").each(function(i,v){
if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);
回答by Alpha G33k
A block width button could easily become responsive button if the parent container is responsive. I think that using a combination of a fixed width and a more detailed selector path instead of !important because:
如果父容器响应，块宽度按钮很容易成为响应按钮。我认为使用固定宽度和更详细的选择器路径的组合而不是 !important ，因为：
1) Its not a hack (setting min-width and max-width the same is however hacky)
1）它不是一个hack（设置min-width和max-width相同但是很hacky）
2) Does not use the !important tag which is bad practice
2) 不使用 !important 标签，这是不好的做法
3) Uses width so will be very readable and anyone who understands how cascading works in CSS will see whats going on (maybe leave a CSS comment for this?)
3) 使用宽度，因此可读性很强，任何了解 CSS 级联如何工作的人都会看到发生了什么（也许为此留下 CSS 注释？）
4) Combine your selectors that apply to your targeted node for increased accuracy
4) 组合适用于目标节点的选择器以提高准确性
.parent_element .btn.btn-primary.save-button {
width: 80px;
}
回答by Andres Velasco Garcia
Just came upon the same need and was not satified with defining fixed width.
刚刚遇到了同样的需求，并且对定义固定宽度不满意。
So did it with jquery:
使用 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>回答by A Sonik
Best way to the solution of your problem is to use button block btn-blockwith desired column width.
解决问题的最佳方法是使用具有所需列宽的按钮块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>