将 Bootstrap 按钮设置为相同宽度

Question

我有一个包含几个按钮的引导侧边栏。不幸的是，它看起来很丑，我希望每个按钮的大小相同。 这些按钮包含在侧边栏中，并将垂直堆叠。我想避免为每个按钮设置像素数。
这是jfiddle
https://jsfiddle.net/66bk2rfc/

HTML

<div id="reading-sidebar" class="col-xs-3 panel-default">
  <div id="reading-sidebar-title" class="panel-heading">Options
    <button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
      <div id="reading-sidebar-contents" class="panel-body">
        <ul class="sidebar-button-list">
          <button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Pre Readings</button><br>
          <button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Passage</button><br>
          <button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Post Readings</button><br>
          <button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Media</button><br>
          <button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Questions</button>
        </ul>
      </div>
    </div> 

Answer 1

执行此操作的“引导”方法是在按钮元素上使用 btn-block。像这样：

<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>

更新：自 Bootstrap 5 起，此解决方案不再有效。 这是文档中的引用：

打破实用程序的已删除 .btn-block。不要在 .btn 上使用 .btn-block，而是使用 .d-grid 和 .gap-* 实用程序包裹按钮，以根据需要间隔它们。切换到响应式类以更好地控制它们。阅读文档中的一些示例。

Answer 2

您也可以用

<div class="btn-group-lg btn-group-vertical">

包围它们

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
  <div id="reading-sidebar" class="col-xs-3 panel-default"></div>
  <div id="reading-sidebar-contents" class="panel-body">
    <div class="btn-group-lg btn-group-vertical">
      <button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Pre Readings</button>
      <button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Passage</button>
      <button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Post Readings</button>
      <button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Media</button>
      <button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Questions</button>
    </div>
  </div>
</div>

Answer 3

如果我答对了你的问题。你的意思是这个吗:

#reading-sidebar-contents .btn{
    width:200px;
}

这是小提琴：https://jsfiddle.net/66bk2rfc/6/

Answer 4

我改变了你的小提琴以匹配解决方案。您可以将侧边栏的宽度设置为 100%。然后你可以用一行 css 将按钮设置为 80%，并使用 margin:0 auto 使它们保持在中间。如果您想调整按钮的大小，只需一行即可轻松更改。您还可以添加 text-align:left，为所有按钮设置字体大小，...以便为按钮提供更好的样式。

 #reading-sidebar
{
    width:80%;
   margin:0 auto;
}

 #reading-sidebar-contents button
{
  width:100%;
   margin:0 auto;
} 

链接：https://jsfiddle.net/66bk2rfc/1/

Answer 5

我建议你这样做：

.btn {
    width: 100%;
    height: 56px;
    padding-left: 2% !important;
}
.btn i {
    left: 10px;
    width: 10%;
    top: 25%;
    height: 50%;
}
.btn.pull-left {
    text-align: left;
}

此外，如果您只想对侧边栏按钮产生这些影响，请添加

#阅读侧边栏 .btn { }等等...

如果你想要它不是 100% 宽度并居中，你应该这样做，

.btn { width: 80%; margin-left: 10%; }

这将使它很容易居中。 :)