按钮的宽度与其所在的列的宽度不同答案

【问题标题】：Button won't have the same width as the column it's in按钮的宽度与其所在的列的宽度不同
【发布时间】：2016-12-05 23:39:09
【问题描述】：

我正在尝试使我的按钮与它所在的列具有相同的宽度。我之前在我的网站上成功地做到了这一点，但这次它只是不起作用...... 该问题出现在以下链接上； http://haagmedia.dk/klf/fanzone.php 这两个按钮位于两个单独的列中，并且我都想要全宽。感谢所有帮助:)！

HTML

<div class="knap2 row">
            <div class="col-lg-4 col-md-4 col-sm-3 col-xs-2"></div>

            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                <a href="#" class="fanknap" alt="Fanzone">FANZONE</a>
            </div>

            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                <a href="#" class="fanknap" alt="Støttemedlem">STØTTEMEDLEM</a>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-3 col-xs-2"></div>
        </div>

    </div>

CSS

.fanknap {
    background-color: #208AF0;
    border: 2px solid #208AF0;
    border-radius: 3px 3px 3px 3px;
    height: auto;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 12px;
}

【问题讨论】：

标签： html css twitter-bootstrap twitter grid

【解决方案1】：

添加：

.fanknap {
    /* Other styles... */
    display:block
}

到您的 css 应该可以解决问题。或者，您可以使用填充物，直到获得所需的东西。但是，我强烈推荐前者。

希望对您有所帮助！

【讨论】：

【解决方案2】：

您需要在按钮 CSS 中添加 display:block;。

演示：https://jsfiddle.net/iRbouh/fhfhrc78/

【讨论】：

爱它，当它如此直截了当！非常感谢！