Html 将 Bootstrap 按钮设置为相同的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31754300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting Bootstrap buttons to the same width
提问by RYDiiN
I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button.
Here is the jfiddle
https://jsfiddle.net/66bk2rfc/
我有一个包含几个按钮的引导侧边栏。不幸的是，它看起来非常丑陋，我希望每个按钮的大小相同。这些按钮包含在侧边栏中，将垂直堆叠。我想避免为每个按钮设置像素数。
这是 jfiddle
https://jsfiddle.net/66bk2rfc/
HTML
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>
回答by joshb
回答by vanburen
You can also just surround them with <div class="btn-group-lg btn-group-vertical">
你也可以用 <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> Pre Readings</button>
<button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Passage</button>
<button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Post Readings</button>
<button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Media</button>
<button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</div>
</div>
</div>回答by Akul Von Itram
If I get your question right. Do you mean this:
如果我回答对了你的问题。你的意思是：
#reading-sidebar-contents .btn{
width:200px;
}
Here is fiddle: https://jsfiddle.net/66bk2rfc/6/
这是小提琴：https: //jsfiddle.net/66bk2rfc/6/
回答by Jan_dh
I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.
我改变了你的小提琴以匹配解决方案。您可以为侧边栏设置 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;
}
回答by EspeH
I suggess You to do it like this:
我建议你这样做：
.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;
}
Also if you just want only these affect to sidebar buttons, add
此外，如果您只想对侧边栏按钮产生这些影响，请添加
#reading-sidebar.btn { } ETC...
#reading-sidebar.btn { } ETC ...
If you want it not 100% width and centered, You should do it like this,
如果你想要它不是 100% 宽度和居中，你应该这样做，
.btn { width: 80%; margin-left: 10%; }
That will make it centered easily. :)
这将使它容易居中。:)
