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>