Question

我正在尝试弄清楚如何从 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。

Answer 1

引导程序的“ .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>

Bootstrap 4删除/忽略父填充

1 个答案: