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

Bootstrap - remove background from navbar link

提问by Matt

I'm trying to work on coding a website using the Bootstrap development kit. I've set up the navigation bar with a couple of links but I'm having some trouble with some custom links I've added. I added CSS to the bootstrap.min.css file titled 'navbar-social', which will be used to house social media icons for the navigation bar.

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

I added the images just fine and they display great. The problem I'm having is when I add a link to them they go out of line and hovering over them gives them a background box which I do not want.

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

I've attached some screenshots and the code used, I cannot for the life of me work out where the background box is coming from, because checking the a styles doesn't seem to have anything there. I'm new to CSS so I apologise if I'm missing something obvious.

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

None linked: http://prntscr.com/2ob9mj

无链接：http: //prntscr.com/2ob9mj

LinkedIn not linked, rest linked: http://prntscr.com/2ob2b2

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

CSS code added to bootstrap.min.css. Rest is as it comes:

添加到 bootstrap.min.css 的 CSS 代码。休息是这样的：

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

HTML: (a href removed in this case)

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>

Thanks all!

谢谢大家！

回答by Josh Crozier

Bootstrap adds styling to the child aelements. You could simply overwrite it using the following:

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

WORKING EXAMPLE HERE

这里的工作示例

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