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