如何使 Bootstrap 按钮全宽？

Posted 2023-03-06

【中文标题】如何使 Bootstrap 按钮全宽？

【英文标题】：How to a make a Bootstrap button full width?

【发布时间】：2015-09-04 21:07:34

【问题描述】：

这就是我现在所拥有的。我不能让它变成全宽

Almost full width

这是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>$39</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>

这些是样式

#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%;

【问题讨论】：

尝试将display: block; 添加到您的父母a

没有运气添加“显示：块；”给父母“a”。好像什么都没做

【参考方案1】：

第一个问题...你为什么要在a 标签内嵌套一个 div？ <a href="#"><div class="btn btn-success">Sign Up</div></a>。试试这个：

<a class="btn btn-block btn-success" href="#">Sign Up</a>

然后从.price-content 选择器中删除padding-right: 50px;。

【讨论】：

你说得对，我删除了 div 但仍然没有任何变化

等等...你的.price-content 框上有padding-right: 50px;。这就是为什么你的按钮没有扩展全角。

天哪，是的，这就是问题所在。现在，由于某种原因，我的列表项没有居中，这就是我使用 padding-right: 50px 的原因，有什么建议吗？

不知道这是否是最好的方法，但我只是为每个“li”添加了一个“margin-right: 50px”。至少在视觉上它完成了工作

【参考方案2】：

我认为那是因为你正在使用

padding-right:50px

在

.价格内容

尝试将按钮移到价格内容 div 之外。

【讨论】：

很高兴它有帮助。并且只是添加到为所有 li 添加填充的解决方案中，您可以编写像 .price-content > li padding-right:50px 这样的 css 选择器，而不是为所有 li 添加内联 css