列表中的图像链接具有奇怪的定位

Question

目前没有添加图标链接到图标，它们看起来像这样：

我的代码如下：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul style="padding-left:10px;" class="nav navbar-nav"> <
              <li><img src="img/FB.png" class="img-responsive" alt="Facebook"  width="52px" ></li>    
              <li><img src="img/TW.png" class="img-responsive" alt="Twitter"  width="52px" > </li>
              <li><img src="img/PI.png" class="img-responsive" alt="Pinterest"  width="52px" ></li>
           </ul>

然而，一旦我开始将其中一个图标更改为图像链接，就会变成这样的

，代码为：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul style="padding-left:10px;" class="nav navbar-nav"> <!-- Content on the left side of the navigation bar  -->
              <li><a href="http://facebook.com"><img src="img/FB.png" class="img-responsive" alt="Facebook" border="0"  width="52px" ></a></li>  
              <li><img src="img/TW.png" class="img-responsive" alt="Twitter"  width="52px" > </li>
              <li><img src="img/PI.png" class="img-responsive" alt="Pinterest"  width="52px" ></li>
           </ul>

我该怎么做才能解决这个问题？

Answer 1

Bootstrap拥有自己的属性，因此您需要替换它们。

.nav > li > a { 
     padding-top: 0px !important; 
}