将 Bootstrap 按钮设置为相同的宽度答案

【问题标题】：Setting Bootstrap buttons to the same width将 Bootstrap 按钮设置为相同的宽度
【发布时间】：2015-10-23 14:42:18
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果我没听错你的问题。你的意思是：

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

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

【讨论】：

【解决方案2】：

我更改了您的小提琴以匹配解决方案。您可以为侧边栏设置 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/

【讨论】：

【解决方案3】：

我建议你这样做：

.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 { } ETC...

如果你希望它不是 100% 宽度和居中，你应该这样做，

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

这将使它容易居中。 :)

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

你也可以用<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>

【讨论】：

用“.btn-group-vertical”包装它在 Bootstrap 4.4.1 中为我工作。