展开可折叠导航栏时如何为导航项添加填充 Bootstrap 5答案

【问题标题】：How to add padding to nav-items when collapsible navbar is expanded Bootstrap 5展开可折叠导航栏时如何为导航项添加填充 Bootstrap 5
【发布时间】：2021-03-29 18:23:04
【问题描述】：

下面我的代码生成了一个可折叠的 Bootstrap 5 导航栏，该导航栏的按钮在右侧而不是左侧，但是您会注意到，在扩展导航栏时，导航项目没有很好的填充/边距我该怎么做仅在展开导航项时为导航项编写 CSS 规则？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.php">Document</a>
      <div class="d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      </div>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <form name="logout" class="logout ms-auto" action="PHP/Logout.php" method="get">
            <button type="submit" class="btn btn-danger">Log Out</button>
          </form>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

【问题讨论】：

标签： javascript html jquery css bootstrap-5

【解决方案1】：

您可以使用内置的 BS5 填充和边距类。试试下面的代码。如果你成功了，请告诉我。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand mr-5 mb-2 p-3" href="index.php">Document</a>
      <div class="d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      </div>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto ml-5 p-3">
          <form name="logout" class="logout ms-auto" action="PHP/Logout.php" method="get">
            <button type="submit" class="btn btn-danger">Log Out</button>
          </form>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

【讨论】：

【解决方案2】：

简单的方法是像这样设置元素的样式

#id-of-your-element{
  padding:50px !important;
}

!important 标签将覆盖 Bootstrap 设置的默认填充

【讨论】：

【解决方案3】：

您只想要移动设备上的填充（小于sm），因此请使用py-sm-0 py-3 在表单上进行垂直填充..

<form name="logout" class="logout ms-auto py-sm-0 py-3" action="/echo" method="get">
    <button type="submit" class="btn btn-danger">Log Out</button>
</form>

Here's the demo

【讨论】：