关闭 - Bootstrap - 如何在 Bootstrap Studio 中对齐汉堡菜单的垂直位置

Question

我有以下问题：我在 Bootstrap Studio 中使用“Clean Sky”模板创建了一个网站，所以当屏幕尺寸小于特定宽度时，我的网站有这个导航栏，显示导航栏切换。当切换变得可见并且我按下此按钮时，即将出现的汉堡菜单被困住并且一些导航栏内容相应。汉堡菜单内容不可见，“LEISTUNGEN”上方应有“HOME”。当我尝试使其可见时，普通导航栏中的链接也会发生变化。

这里是按下前的屏幕：

Before pressing

这里是可见的“切口”：

After pressing the Button

我可以在 CSS 代码中进行哪些更改，或者我可以使用 JavaScript 编写哪些代码来解决该问题？

编辑

我没有找到确切的错误，我忘记了我想在其下创建一个模糊的透明导航栏和一个轮播，所以我使用了一些边距和填充设置。无论我更改了什么，在导航栏上没有任何边距和填充设置更改的情况下重新创建网站后，汉堡菜单现在可以正常工作。

导航栏的代码：（除了导航栏之外的任何内容都在导航栏内，不要被第二行后的缩进所迷惑）

<nav class="navbar navbar-light navbar-expand-lg fixed-top clean-navbar" style="/*background:none;*/background-color:rgba(255,255,255,0.8);background-image:none;z-index:1000;font-family:Montserrat, sans-serif;padding:0px;margin:0px;height:70px;width:100%;">
<div class="container-fluid" style="background-color:rgba(0,0,0,0);">
    <a href="#" class="navbar-brand text-primary logo" style="color:#000000;margin-right:16px;padding-left:15px;">Neugart-GmbH</a>
    <button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler" style="margin-left:0px;margin-right:15px;font-size:20px;">
        <span class="sr-only" style="/*color:#ff0404;*/">Toggle navigation</span>
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navcol-1" style="background:none;background-color:rgba(0,0,0,0);">
        <ul class="nav navbar-nav ml-auto">
            <li role="presentation" class="nav-item" style="margin-top:0px;padding-top:0px;">
                <a href="index.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Home</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="services.html" class="nav-link text-primary active" style="color:#000000;font-size:13px;">Leistungen</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="references.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Referenzen</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="about-us.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Unser Team</a>
            </li>
            <li role="presentation" class="nav-item">
                <a href="contact-us.html" class="nav-link text-primary" style="color:#000000;font-size:13px;">Kontakt</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Answer 1

只是一个快速提示：通过将样式和结构拆分到单独的文件中来保持代码简洁（以防您在此处显示的代码也仅用于示例目的）。创建一个外部 style.css 文件并在你的脑海中链接到它explained here

要解决它，您应该检查并尝试通过在浏览器中转到检查器（按 F12）来修改项目类别。您可能会发现其他一些与您的

-item 冲突的样式声明。