使用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;
}

这样,即使你有一个响应式设计,它应该始终保持80px.

至于扩展Bootstrap的正确方法,请看一下这个帖子:

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

引导程序 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>