html - Bootstrap - 从导航栏链接中删除背景

Question

我正在尝试使用 Bootstrap 开发工具包编写网站代码。我已经用几个链接设置了导航栏，但是我在添加一些自定义链接时遇到了一些问题。我将 CSS 添加到名为“navbar-social”的 bootstrap.min.css 文件中，该文件将用于放置导航栏的社交媒体图标。

我添加的图像很好，它们显示效果很好。我遇到的问题是，当我向它们添加链接时，它们会越界，将鼠标悬停在它们上方会给它们一个我不想要的背景框。

我附上了一些屏幕截图和使用的代码，我终究无法确定背景框的来源，因为检查 a 样式似乎没有任何内容。我是 CSS 的新手，所以如果我遗漏了一些明显的东西，我深表歉意。

没有链接:http://prntscr.com/2ob9mj

LinkedIn 未链接，其余链接:http://prntscr.com/2ob2b2

CSS 代码添加到 bootstrap.min.css。安息如其来:

.navbar-social{
float:right !important;
padding:5px;
font-size:18px;
line-height:37px;
height:20px
}

HTML:(在本例中删除了 href)

<nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
             <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="">REMOVED</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">About</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programming <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Java</a></li>
                        <li><a href="#">C++</a></li>
                        <li><a href="#">Actionscript 3.0</a></li>
                      </ul>
                    </li>
                    <li><a href="">Web Design</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li class="navbar-social"><img src="images/linkedin.png" alt="LinkedIn" /></li>
                    <li class="navbar-social"><img src="images/github.png" alt="GitHub" /></li>
                    <li class="navbar-social"><img src="images/twitter.png" alt="Twitter" /></li>
                    <li class="navbar-social"><img src="images/facebook.png" alt="Facebook" /></li>
                </ul>
            </div>
        </div>
    </nav>

谢谢大家!

Answer 1

Bootstrap 将样式添加到子 a 元素。您可以使用以下内容简单地覆盖它:

WORKING EXAMPLE HERE

.nav .navbar-social > a {
    padding:0;
}
.nav>li>a:hover, .nav>li>a:focus {
    background-color: transparent;
}