将 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>

原文由 RYDiiN 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 joshb 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 vanburen 发布，翻译遵循 CC BY-SA 3.0 许可协议