Question

我目前正在使用Bootstrap开玩笑，我遇到了一个我无法找到解决方案的网站问题。

我目前正在撰写两个网站，对于这两个网站，我使用相同的修改后的bootstrap导航栏。导航栏HTML和CSS代码没有根本区别（唯一的区别是颜色和品牌/部分名称），但是，导航栏可以折叠的按钮在其中一个站点中不起作用，并且工作完美在另一个。既然我没有看到任何区别，我不明白为什么一个人会工作而不是另一个......

这是第一个网站导航栏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>

这是第二个网站导航栏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，因此我放在导航栏下的一个jumbotron没有分开。但是，我在第一个网站上放了一个类似的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网站中，两者都正常工作。我不认为导航栏或jumbotron边缘会有任何影响。我还将你的css剪切并粘贴到我的页面中，但两个版本仍能正常工作。

我的猜测是你的html或css中的其他地方有一些琐碎的事情搞砸了。

Bootstrap导航栏不会崩溃

1 个答案: