我正在使用 bootstrap 编写网站,并且在垂直导航栏和我的网站菜单之间有额外的空间。它就像大屏幕上的 +/- 10 像素,但因此有一个水平条。 我的代码:
<header>
<div class="col-sm-8 offset-sm-2">
<a href="logo"><img src="logo.png" width="100%"/></a>
</div>
<nav>
<ul class="menu col-sm-12">
<li><a href="start"><i class="icon-users"></i> About us</a></li>
<li><a href="out-products"><i class="icon-leanpub"></i> Products</a></li>
<li><a href="contact"><i class="icon-mail-alt"></i> Contact</a></li>
</ul>
</nav>
</header>
CSS 中的 和 .menu
类:
.menu
{
list-style-type: none;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
font-size: 20px;
min-height: 30px;
line-height: 150%;
letter-spacing: 1px;
background: linear-gradient(to top, rgba(165,160,160,1), rgba(0,0,0,0));
}
有人知道怎么解决吗?
最佳答案
您的 HTML 中有一些错误,列应该像这样排列在行中:
<div class="row">
<div class="col-8">
<p> My content </p>
</div>
<div class="col-4">
<p> My other content </p>
</div>
</div>
如果您从 .menu 中删除 padding-top 或将其设置为 0,您的问题可能会得到解决
.menu
{
list-style-type: none;
padding-top: 0; // do not add padding to top
padding-bottom: 8px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
font-size: 20px;
min-height: 30px;
line-height: 150%;
letter-spacing: 1px;
background: linear-gradient(to top, rgba(165,160,160,1), rgba(0,0,0,0));
}
关于html - 菜单和垂直导航栏之间的额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51798906/