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

时间:2016-08-01 00:29:24

标签: html css twitter-bootstrap twitter grid

我试图让我的按钮与它所在的列具有相同的宽度。我之前在我的网站上已经成功了,但这次它不会工作...... 问题出现在以下链接上; 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;
}

2 个答案:

答案 0 :(得分:2)

您需要将display:block;添加到按钮CSS。

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

答案 1 :(得分:1)

添加:

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

你的css应该解决这个问题。或者,你可以玩填充,直到你得到你需要的。但是,我强烈推荐前者。

希望它有所帮助!