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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com