使用Bootstrap固定宽度button
Bootstrap是否支持固定宽度的button？ 目前如果我有2个button，“保存”和“下载”，button的大小根据内容而改变。
另外扩展Bootstrap的正确方法是什么？
您也可以在button上使用.btn-block类，以便扩展到父宽度。
如果父元素是固定宽度的元素，则button将展开为全部宽度。 您可以将现有标记应用于容器，以确保固定/stream体button仅占用所需的空间。
<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="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>
要做到这一点，你可以想出一个宽度，你觉得这两个button是好的，然后创build一个宽度的自定义类，并将其添加到您的button，如下所示：
CSS
.custom { width: 78px !important; }
然后，我可以使用这个类，并将其添加到button，如下所示：
<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/
您可以将您创build的自定义类放在您自己的样式表中，在引导样式表之后加载。 我们这样做是因为在更新框架时，您在引导样式表中放置的任何更改都可能意外丢失，我们也希望您的更改优先于默认值。
如果你把你的button放在一个“btn-group”类的div里，button里的button就会和最大的button一样大小。
例如：
<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>
引导button组
对于button，可以为具有指定的最小宽度和最大宽度的特殊类button创build另一个CSSselect器。 所以，如果你的button是
<button class="save_button">Save</button>
在你的Bootstrap CSS文件中，你可以创build类似的东西
.save_button { min-width: 80px; max-width: 80px; }
这样，即使你有一个响应式devise，它应该始终保持80px。
至于扩展Bootstrap的正确方法是，看看这个线程：
扩展Bootstrap
如果父容器响应，块宽度button可以很容易地变成响应button。 我认为使用一个固定的宽度和一个更详细的select器path，而不是！重要的组合，因为：
1）它不是一个黑客（设置最小宽度和最大宽度相同，但是哈克）
2）不要使用！坏习惯的重要标签
3）使用宽度，所以将是非常可读的，谁了解如何级联在CSS中工作将看到发生了什么事情（也许留下一个CSS评论呢？）
4）结合适用于您的目标节点的select器，以提高准确度
.parent_element .btn.btn-primary.save-button { width: 80px; }
这可能是一个愚蠢的解决scheme，但我正在寻找解决这个问题，并得到了懒惰。
无论如何，使用input类=“btn …”…而不是button和填充值=属性与空格，使他们都是相同的宽度工作得很好。
例如：
<input type="submit" class="btn btn-primary" value=" Calculate "/> <input type="reset" class="btn btn-primary"value=" Reset "/>
我一直没有使用bootstrap，也许有一个很好的理由不使用这种方法，但我认为我可以分享
刚刚出现同样的需求，并没有满足于定义固定宽度。
所以它与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>
