CSS 如何使 Bootstrap 按钮全宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30928715/
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
How to a make a Bootstrap button full width?
提问by Andrés Liu
This is what I have right now. I can't get it to become full width
这就是我现在所拥有的。我无法让它变成全宽
This is the html. I've already tried adding .btn-block class but I get the same results as if I just used width: 100%; in the css. Maybe the problem is with the parent element?
这是 html。我已经尝试添加 .btn-block 类，但得到的结果与我刚刚使用 width: 100%; 一样。在css中。也许问题出在父元素上？
<article class="col-xs-12 col-md-4">
<div class="label label-success price"><span class="glyphicon glyphicon-tag"></span></div>
<div class="price-title">
<h3>LOREM</h3>
<small>Lorem Ipsum</small>
</div>
<div class="price-content ">
<ul>
<li><h4>Item or Service # 1</h4></li>
<li><h4>Item or Service # 2</h4></li>
<li><h4>Item or Service # 3</h4></li>
<li><h4>Item or Service # 4</h4></li>
<li><h4>Item or Service # 5</h4></li>
<li><h4>Item or Service # 6</h4></li>
</ul>
<a href="#"><div class="btn btn-success">Sign Up</div></a>
</div>
</article>
And these are the styles
还有这些款式
#tables{
color: white;
text-align: center;
margin: 15px 20px;}
.price{
position: relative;
top: 20px;
font-size: 30px;}
.price-content{
background-color: #E8E9EA;
color: #69696A;
padding-right: 50px;
padding-top: 30px;
height: 350px;
margin-bottom: 80px;
width: 100%;}
.btn{
border-radius: 0px;
font-size: 20px;
font-weight: bold;
width: 100%;}
回答by Sean Stopnik
Well first question... why the heck are you nesting a div inside the atag? <a href="#"><div class="btn btn-success">Sign Up</div></a>. Try this:
那么第一个问题......你为什么要在a标签内嵌套一个div ？ <a href="#"><div class="btn btn-success">Sign Up</div></a>. 尝试这个：
<a class="btn btn-block btn-success" href="#">Sign Up</a>
Then remove padding-right: 50px;from the .price-contentselector.
然后padding-right: 50px;从.price-content选择器中删除。
回答by Stand Still
I think that is because you are using
我认为那是因为你正在使用
padding-right:50px
填充右：50px
in
在
.price-content
.价格-内容
Try moving moving your button outside of price-content div.
尝试将您的按钮移到价格-内容 div 之外。
