扩展导航项时如何使导航扩展答案

【问题标题】：How to make nav expand when expanding nav items扩展导航项时如何使导航扩展
【发布时间】：2021-03-12 19:08:46
【问题描述】：

我有一个投资组合网站，其中包含一些用于不同视图的导航项目。我基本上从引导站点复制了默认导航代码。当我扩展我的“汉堡包”时，导航保持相同的大小，因此使扩展的项目与我的导航边界重叠。像这样：

我似乎在 Bootstrap 网站上找不到任何东西来解决这个问题。这和我的边界在那里有关吗？这是我的导航代码：

.navbar{
    height: 10.0rem;
    border-bottom: 1px solid rgb(168, 168, 168);
}
.bg-light {
    background-color: white !important;
}
.navbar-collapse{
    padding-left: 0;
}

#options{
    list-style-position: inside;
    padding-left: 12rem;
}
#options li{
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.2rem;
    font-family: Raleway;
}
li a:hover{
    border-bottom: 0.001rem solid black;
}
.navbar-brand{
    font-size: 4rem;
    padding-left: 3rem;
    font-family: Raleway;
    font-weight: 400;
}
#header-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: right;
    width: 50%;
    height: 50%;
    margin: 0 0 0 10%;
    padding-left: 30%;
}

html{
    height: fit-content;
}
body {
    padding-top: 5.0rem;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alan Alban - Portfolio</title>
</head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Alan Alban</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <section id="header-container">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav" id="options">
          <li class="nav-item active">
            <a class="nav-link" href="/">Experience <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/projects">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/skills">Skills</a>
          </li>
        </ul>
      </div>
    </section>
  </nav>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

提前感谢您的帮助

【问题讨论】：

标签： html jquery css bootstrap-4 navbar

【解决方案1】：

您只是导入 jquery.min.js，但您也应该导入 bootatrap.min.js。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

这是你应该放在正文底部的完整脚本，就在标签结束之前。

并在你的 head 标签中移动你的 css。

阅读可以帮助您入门的官方文档，大部分答案都在那里。

https://getbootstrap.com/docs/4.5/getting-started/introduction/

您还可以找到一些很好的工作示例，这些示例将帮助您以正确的方式开始。

【讨论】：

我确实有引导程序，我只是没有在这个例子中复制它，但我确实得到了引导程序行为。唯一的问题是导航没有扩展。
好的，如果我没记错的话，您希望将导航栏项目列表放在该行边框下，并在悬停时增加文本的大小，对吗？首先，您不应该在导航栏标签中使用部分，而是可以在导航栏 div 类中添加您的类。如果您想修改文本样式，我建议您使用引导样式，因为我可以看到您希望将文本右对齐，因此只需在您的类中放置一个“文本右”，如果是文本大小你希望它在悬停时更大，然后你可以将它添加到你的 CSS 下的“li a:hover”下。
如果你想让导航栏在行下展开，你可以在标签“ul”的类中添加一个填充，仍然使用引导程序集成样式作为魅力“pt-5 ”。我希望我能正确理解你的问题。如果导航根本没有扩展，请确保先导入 jquery，然后再导入 bootstrap.min.js。

【解决方案2】：

我发现了问题所在。

.navbar{
    height: 10.0rem;
    border-bottom: 1px solid rgb(168, 168, 168);
}

sn-p 是我打算修改导航栏初始宽度的方式。我删除了 height 属性，现在它可以正常工作了。

我的猜测是，通过设置高度，我基本上将导航锚定到特定大小。我会尝试最小高度，看看是否有效。它看起来不错，因为我的导航元素有填充。

【讨论】：