html – 将Bootstrap按钮设置为相同的宽度

前端之家收集整理的这篇文章主要介绍了html – 将Bootstrap按钮设置为相同的宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含几个按钮的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>

解决方法

“bootstrap”方法是在你的按钮元素上使用 btn-block.像这样:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>

猜你在找的HTML相关文章