删除bootstrap导航栏上的顶部填充

Question

I am attempting to remove the padding on the top of the navbar image. 我试图删除导航栏图像顶部的填充。

I have tried playing around with the padding numbers and cannot seem to get it. 我试过玩填充数字似乎无法得到它。

I can get the padding to be removed but then the positioning of the rest of the elements is moved all around. 我可以删除填充，但其余元素的位置会四处移动。

<style>
    .navbar-inner{
        position:relative;
        padding-left:70px;
    }
    .navbar .brand {                
        position: absolute;
        left: 0px;
        top: 0px;
        width: 50px;
        background: #f00;        
        margin-left: 0px;
        padding: 0px;
    }

    #logo{
        height: 40px;
    }

</style>

<body>
    <nav class="navbar navbar-default" style="margin-top: 0">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"> <img id="logo" src="http://i.imgur.com/McZjymS.png"></a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Technology Training Calendar</a></li> 
            <li><a href="#">Flyers</a></li>
            <li><a href="#">Status Reports</a></li>
            <li><a href="#">Procedures</a></li>
            <li><a href="#">The Upgrade</a></li>
            <li><a href="#">Tales from Tech Support</a></li> 
          </ul>
        </div>
      </div>
    </nav>
</body>

</html>

If I add this to css I can get it to line up but the position is all off 如果我将它添加到css我可以让它排队但位置全部关闭

#logo{
    height: 40px;
    position:absolute;
    top: 0;
    width: 45px;
}

Answer 1

You need to remove the padding on the link containing the image with: 您需要删除包含图像的链接上的填充：

.navbar-brand {
  padding:0;
}

bootply example bootply的例子

Answer 2

Adjust by targetting the class holding the image, not the image itself. 通过定位保持图像的类而不是图像本身进行调整。 Like this: 像这样：

       a.navbar-brand {
          padding: 6px 10px; //adjust this accordingly until you have it centered.
       }

Here is your code solved 这是你的代码解决了

删除bootstrap导航栏上的顶部填充

问题描述

2 个解决方案

解决方案1
3 2015-12-28 20:44:53

解决方案2
1 已采纳 2015-12-28 20:47:51

删除bootstrap导航栏上的顶部填充

问题描述

2 个解决方案

解决方案1 3 2015-12-28 20:44:53

解决方案2 1 已采纳 2015-12-28 20:47:51

解决方案1
3 2015-12-28 20:44:53

解决方案2
1 已采纳 2015-12-28 20:47:51