个人中心
gpt4 book ai didi

html - 删除 Bootstrap 导航栏上的顶部填充

转载 作者：搜寻专家 更新时间：2023-10-31 23:24:09 25 4
gpt4 key购买 nike

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

我试过使用填充数字，但似乎无法得到它。

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

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

如果我将它添加到 css 中，我可以让它对齐，但位置全部关闭

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

最佳答案

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

.navbar-brand {
  padding:0;
}

bootply example

关于html - 删除 Bootstrap 导航栏上的顶部填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34500423/

25 4 0
文章推荐： javascript - react 中的 Mapbox(ReferenceError : L is not defined)
文章推荐： php - PHP 中的服务器绑定(bind)计数器，每个午夜都会重置为零，或者至少看起来是这样
文章推荐： php - 在 JavaScript 中为 Google Maps V2 使用 PHP 变量
文章推荐： javascript - Node.js 文件系统保存文件错误 56 EROFS，同时每 2 秒保存一次