html – 将Bootstrap按钮设置为相同的宽度
发布时间:2020-12-14 23:43:26 所属栏目:资源 来源:网络整理
导读:我有一个包含几个按钮的bootstrap侧边栏.不幸的是,它看起来非常难看,我希望每个按钮的大小相同. 这些按钮包含在侧栏中,将垂直堆叠.我想避免为每个按钮设置像素数.这是jfiddle https://jsfiddle.net/66bk2rfc/ HTML div id="reading-sidebar" class="col-xs-3
我有一个包含几个按钮的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> Pre Readings</button><br> <button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Passage</button><br> <button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Post Readings</button><br> <button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Media</button><br> <button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Questions</button> </ul> </div> </div> 解决方法
“bootstrap”方法是在你的按钮元素上使用
btn-block.像这样:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |