将Bootstrap按钮设置为相同宽度

Question

我有一个包含几个按钮的Bootstrap侧边栏，但它看起来非常丑陋，我想让每个按钮大小相同。 这些按钮包含在侧边栏中，并将垂直堆叠。我希望避免为每个按钮设置像素数。
下面是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

Answer 1

采用“Bootstrap”的方式来实现这一点是在按钮元素上使用btn-block，就像这样：

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

- joshb

Answer 2

你可以使用 <div class="btn-group-lg btn-group-vertical"> 将它们包围起来。此方法适用于IT技术相关内容。

<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

---

在Bootstrap 4.4.1中，使用“.btn-group-vertical”进行包装对我很有效。 - Paul Brady

Answer 3

如果我理解您的问题正确，您是指这个问题：

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

Here is fiddle: https://jsfiddle.net/66bk2rfc/6/

- Akul Von Itram

Answer 4

我修改了你的fiddle以匹配一个解决方案。你可以给你的侧边栏设置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/

- Jan_dh

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

另外，如果您只想对侧边栏按钮进行这些影响，请添加

#reading-sidebar .btn { } 等等...

如果您不希望它是100％的宽度和居中的，则应像此示例一样进行设置：

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

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

- EspeH