按钮的宽度不会与列中的宽度相同

Question

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

Answer 1

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

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

Answer 2

添加：

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

到你的CSS应该解决的问题。或者，你可以玩填充，直到你得到你所需要的。不过，我强烈建议前者。

希望它有帮助！