Question

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

我添加的图像很好，它们显示效果很好。我遇到的问题是，当我添加一个链接到它们时，它们会脱离线并悬停在它们上面，给它们一个我不想要的背景框。

我附上了一些截图和使用的代码，我不能为我的生活找出背景框的来源，因为检查样式似乎没有任何东西。我是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;
}

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

1 个答案: