Question

我正在尝试删除导航栏图像顶部的填充。

我试过玩填充数字似乎无法得到它。

我可以移除填充，但其余元素的位置会四处移动。

int inNumber;
inNumber = Convert.ToInt32(textBox1.Text);

如果我将其添加到css中，我可以将其添加到排队但位置全部关闭

<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>

Answer 1

您需要删除包含图像的链接上的填充：

.navbar-brand {
  padding:0;
}

<强> bootply example

Answer 2

通过定位包含图像的类来调整，而不是图像本身。像这样：

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

Here已解决您的代码

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

2 个答案: