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）修改项目类。你可能会发现一些其他的风格声明，我认为，你的＆lt; UL＆GT; -Item

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

1 个答案: