个人中心
gpt4 book ai didi

javascript - 如何防止导航栏重叠标题？

转载 作者：行者123 更新时间：2023-11-27 23:15:49 24 4
gpt4 key购买 nike

我的导航栏目前有一些问题。现在它看起来像图一，但我想让它看起来像图 2。我该怎么做？我必须在 CSS 上添加什么吗？

/* Nav Bar*/
.navbar-brand{
    height: 3.5rem;
}

.navbar-nav li {
    padding-right: 0.1rem;
}

.nav-link {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-item:hover {
    border-bottom: 1px solid #FF7200;
}

.nav
{
    
}
<body>
  <!--Navigation-->
  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <img class="navbar-brand" src="../img/IMG_0537.PNG" alt="KAJ Construction Logo"/>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#section-Services" >Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Gallery" >Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Contact" >Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

How it currently looks when services link is clicked How I want it to look like

最佳答案

添加一些内置的引导边距和填充，如 mt-3(mt 表示边距顶部)使用 p-2(从每一侧填充)2 和 3 定义 2rem 或 3rem 使用它会修复

关于javascript - 如何防止导航栏重叠标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58279819/

24 4 0
文章推荐： c++ - 如何使用枚举值通过预处理器指令直接编译
文章推荐： C++ : extern variable inside namespace and printf vs cout
文章推荐： c++ - 将指针数组地址传递给函数并更新地址中的数据
文章推荐： php - 无法显示背景 :url from css in a php file