我正在尝试弄清楚如何从 ul 元素中删除顶部和底部填充,以使其不受 -nav-填充的影响,该填充默认设置为8像素。这是代码:
<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。
答案 0 :(得分:0)
引导程序的“ .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>