html - Bootstrap自定义CSS规则如何设置文本装饰:none for hyperlink?

Question

我正在使用 twitter bootstrap css，并使用一些自定义 css 来覆盖一些默认规则。 ,

但我无法从超链接中删除底部边框，

HTML

<footer>
<div class="row">
<div class="col-lg-12 footer">   
<nav>
<a href="" >first link</a>
<a href="" class="nounderline">second link</a>  
<a href="" class="nounderline"><i class="fa fa-facebook-square fa-2x"></i>     fb icon  </a> 
</nav>
</div>
</div>
</footer>    

CSS

@import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");


.footer a{
color: #000;
border-bottom: 1px dotted #000;
} 

.nounderline { text-decoration: none !important}

即使我已将类设置为 .nounderline，它仍然在超链接上显示下划线。

我试过内联指定 text-decoration: none !important

例如HTML

<a href="" class="nounderline" style="text-decoration: none !important;"><i class="fa fa-facebook-square fa-2x"></i>     fb icon  </a> 

但它仍然显示超链接的下划线。

如何去掉超链接的下划线？

http://jsfiddle.net/x4eetcve/

Answer 1

在这种情况下，它与 text-decoration 无关。 a 元素上有一条虚线边框。

.footer a {
   color: #000;
   border-bottom: 1px dotted #000; 
}

去掉 border-bottom，这样看起来就没问题了。

我已经更新了你的 fiddle ，在这里查看 http://jsfiddle.net/x4eetcve/1/

---

警告

如果您像 Bootstrap 期望用户那样在整个页面全局使用 footer a，那么您应该覆盖 a.underline 上的 border-bottom 。