Bootstrap导航栏不会崩溃

Question

我目前对Bootstrap开玩笑，但遇到一个我似乎找不到解决方案的网站问题。

我目前正在编写两个网站，对于这两个网站，我使用的是相同的修改后的引导导航栏。 导航栏HTML和CSS代码没有根本区别（唯一的区别是颜色和品牌/部门名称），但是，出现的使导航栏可以折叠的按钮在这些网站之一中均无法正常工作在另一个。 由于我没什么区别，所以我不明白为什么一个会起作用，而另一个却不起作用...

这是第一个网站导航栏HTML（有效的HTML）：

<nav class="navbar navbar-new" role="navigation">
    <div class="container-fluid">
        <!-- logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="main.html"> Artist Name </a>
        </div>
        <!-- menu -->
        <div class="collapse navbar-collapse navbar-right" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="main.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

这是第二个网站navbar HTML：

<nav class="navbar navbar-new" role="navigation">
<div class="container-fluid">
    <!-- logo -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.html">TNDC Inc.</a>
    </div>
    <!-- menu -->
    <div class="collapse navbar-collapse navbar-right" id="navbar1">
        <ul class="nav navbar-nav">
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li class = "active"><a href="expertise.html">Expertise</a></li>
            <li><a href="competencies.html">Competencies</a></li>
        </ul>
    </div>
</div>

问题可能出在我包含在第二个网站中的CSS上，这样我放在导航栏下面的巨型电子秤就不会分开了。 但是，我在第一个网站上放置了类似的CSS行，以使我包含的轮播也不会分开。

这是第一个网站的CSS行：

.navbar { margin-bottom:0px; }
.carousel-caption { margin-top:0px; }

这是第二个网站的CSS行：

.navbar {
margin-bottom:0;}

.jumbotron {
  margin-bottom:0;}

这也是我在两个网站中都包含的CSS，用于在问题存在于此处的情况下修改导航栏的外观（两个网站之间的CSS没有区别，只是颜色不同）：

/*start navbar*/
.navbar {
border-radius: 0;
}

.navbar-new {
background-color: #007008;
border-color: #004005;
}

.navbar-new .navbar-brand,
.navbar-new .navbar-brand:hover,
.navbar-new .navbar-brand:focus {
color: #FFF;
}

.navbar-new .navbar-nav > li > a {
color: #FFF;
}

.navbar-new .navbar-nav > li > a:hover,
.navbar-new .navbar-nav > li > a:focus {
background-color: #004005;
}

.navbar-new .navbar-nav > .active > a,
.navbar-new .navbar-nav > .active > a:hover,
.navbar-new .navbar-nav > .active > a:focus {
color: #FFF;
background-color: #004005;
}

.navbar-new .navbar-text {
color: #FFF;
}

.navbar-new .navbar-toggle {
border-color: #004005;
}

.navbar-new .navbar-toggle:hover,
.navbar-new .navbar-toggle:focus {
background-color: #004005;
}

.navbar-new .navbar-toggle .icon-bar {
background-color: #FFF;
}
/*end navbar*/

很抱歉，发布了很长的文章，以及最终出现的英语错误，我不是母语人士。 我希望有人能够帮助我，尽管我完全信任这个社区：D。

Answer 1

我认为这里还有其他事情。 我拿走了您的两个代码块，并将它们分别剪切并粘贴到我的Bootstrap站点之一中，并且都可以正常工作。 我认为导航栏或巨型机的边距不会产生任何影响。 我还剪切了您的CSS并将其粘贴到我的页面中，但两个版本仍然可以正常工作。

我的猜测是您的html或css中的其他地方有些琐碎的事情弄糟了。