我想弄清楚如何从 ul 元素中删除顶部和底部的填充，以便它不受 -nav- 填充的影响，默认设置为8px。这是代码:
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand ">Welcome Brand</a>
<form action="search.php" class="form-inline ml-auto" method="post">
<div class="input-group">
<input class="form-control input-group-sm" type="text" name="searchTerm" placeholder="Search..." aria-label="Search...">
<div class="input-group-append">
<input class="btn btn-outline-info btn-sm" type="submit" value="Search">
</div>
</div>
</form>
<ul class="navbar-nav ml-2">
<li class="nav-item mr-2"><a href="#" class="nav-link btn-outline-info">Browse Movies</a></li>
<li class="nav-item"><a href="#" class="nav-link btn-outline-info">Sign in</a></li>
</ul>
</nav>
</body>
我希望 -ul- 标签有 0px 的填充，而其余的保持在 8px。
最佳答案
可以将 Bootstrap 的“.py-0”CSS 规则添加到您的“ul”元素以删除任何顶部和底部填充。但是，这不会改变“导航”填充。如果您想扩展到“nav”元素的填充，一种方法是对“li”元素应用负的顶部和底部边距:
<ul class="navbar-nav ml-2 py-0">
<li class="nav-item mr-2" style="margin-top: -8px; margin-bottom: -8px;">
<a href="#" class="nav-link btn-outline-info">Browse Movies</a>
</li>
<li class="nav-item" style="margin: -8px 0;">
<a href="#" class="nav-link btn-outline-info">Sign in</a>
</li>
</ul>
关于html - Bootstrap 4 删除/忽略父填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53144294/