带Bootstrap的固定宽度按钮
带Bootstrap的固定宽度按钮
提问于 2012-06-15 20:02:22
Bootstrap是否支持固定宽度按钮？目前，如果我有两个按钮，“保存”和“下载”，按钮的大小会根据内容而改变。
另外，扩展Bootstrap的正确方式是什么？
回答 10
Stack Overflow用户
回答已采纳
发布于 2012-09-21 17:28:23
还可以在按钮上使用.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>
Stack Overflow用户
发布于 2014-03-13 14:34:12
如果你把你的按钮放在一个类为"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> Stack Overflow用户
发布于 2012-06-15 20:15:30
对于您的按钮，您可以为那些具有指定的最小宽度和最大宽度的特殊按钮类创建另一个CSS选择器。所以如果你的按钮是
<button class="save_button">Save</button>在您的Bootstrap CSS文件中，您可以创建如下内容
.save_button {
min-width: 80px;
max-width: 80px;
}这样，即使你有一个响应式的设计，它也应该始终保持80px。
至于扩展Bootstrap的正确方法，请看下面的线程：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11050269
复制相关文章
相似问题