我有一个Bootstrap 3导航栏。在移动设备上一切正常，但在桌面尺寸下，当点击导航链接时，导航栏的“移动”折叠版本会闪烁。我只是不想在桌面上看到这个。
我对网络开发相当陌生，所以如果我的代码无组织或草率，我会道歉。代码是......
/* CSS used here will be applied after bootstrap.css */
.navbar {
height: 110px;
background-color: #f7f7f7;
width: 100%;
border-color: #f7f7f7;
}
.navbar-logo {
margin-top: 10px;
margin-left: 45px;
}
.navbar-social {
margin-top: 10px;
}
.navbar-social i {
float: left;
background: #ffffff;
color: #707070;
width: 30px;
height: 30px;
border: 1px solid #909090;
border-radius: 20px;
text-align: center;
margin-right: 10px;
padding-top: 10px;
}
.navbar-social > p {
float: right;
text-align: right;
color:#FF344E;
}
.navbar .nav-pills>.active>a:hover,.navbar .nav-pills>li>a:hover, .navbar .nav-pills>li>a:focus {
background-color: #f60756;
}
.navbar .nav-pills>.active>a,.navbar .nav-pills>.open>a,.navbar .nav-pills>.open>a, .navbar .nav-pills>.open>a:hover,.navbar .nav-pills>.open>a, .navbar .nav-pills>.open>a:hover, .navbar .nav-pills>.open>a:focus {
background-color: #f60756;
}
.dropdown-menu {
background-color: #f7f7f7;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #f60756;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-image: none;
}
.navbar .navbar-brand {
color: #000000;
}
.navbar .navbar-brand:hover {
color: #FFFFFF;
}
/* fills in background on hamburger menu */
.navbar-collapse > ul {
background-color: #f7f7f7;
}
/* hamburger menu list */
.navbar .nav-pills>li {
margin: 10px;
font-size: 18px;
background-color: #f7f7f7;
}
/* hamburger menu list item */
.navbar .nav-pills>li>a {
color: #000000;
background-color: #f7f7f7;
}
.navbar .nav-pills .open .dropdown-menu>li>a, .navbar .nav-pills .open .dropdown-menu {
background-color: #f7f7f7;
color:#ffffff;
}
.navbar .nav-pills>li>a:hover, .navbar .nav-pills>li>a:focus {
color: #ffffff;
background-color: #f60756;
}
.navbar .nav-pills>.active>a,.navbar .nav-pills>.open>a, .navbar .nav-pills>.open>a:hover, .navbar .nav-pills>.open>a:focus {
color: #ffffff;
background-color: #f60756;
}
.navbar .nav-pills>.active>a:hover, .navbar .nav-pills>.active>a:focus {
color: #707070;
background-color: #f60756;
}
.navbar .dropdown-menu {
background-color: #f7f7f7;
color: #ffffff;
}
.dropdown-menu>li>a {
color: #333333;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
color: #FFFFFF;
}
.navbar .nav-pills>.dropdown>a .caret {
border-top-color: #999999;
}
.navbar .nav-pills>.dropdown>a:hover .caret {
border-top-color: #999999;
}
.navbar .nav-pills>.dropdown>a .caret {
border-bottom-color: #999999;
}
.navbar .nav-pills>.dropdown>a:hover .caret {
border-bottom-color: #999999;
}
/* hamburger menu colors */
.navbar .navbar-toggle {
border-color: #f60756; /* Change border color around this buttons */
background: #f60756; /* Change background for button itself */
}
.navbar .navbar-toggle .icon-bar {
background: #ffffff; /* Change color for horizontal lines */
}
.navbar-collapse.in {
overflow-y: none;
}<div class="navbar navbar-fixed-top" role="banner">
<a href="./" class="col-xs-2 col-sm-2 col-md-2 navbar-logo">
<img alt="Brand" src="img/" height="100" width="100">
</a>
<div class="col-xs-6 col-xs-offset-1 col-sm-6 col-md-6 col-md-offset-0 col-lg-6 navbar-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<!--TODO check vimeo for removal
<a href="#"><i class="fa fa-vimeo"></i></a> -->
<p>555.555.5555</p>
</div>
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="col-xs-6 col-xs-offset-8 col-sm-12 col-md-9 col-md-offset-1 nav navbar-nav nav-pills">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#whyRadicalNav">Why Radical?</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#whyGiraffeNav">Why Giraffe?</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#towerNav">Tower</a>
</li>
<li>
<a href="#storiesNav">Stories</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#contactNav">Contact</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#">Blog</a>
</li>
</ul>
</nav>
</div>
答案 0 :(得分：2)
这是因为您每次点击链接时都会定位导航栏折叠。究竟为什么导航栏表现得很有趣：
而不是：
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#contactNav">Contact</a>
</li>
为此（对所有链接执行此操作）：
<li>
<a href="#contactNav">Contact</a>
</li>
<li>
<a href="#whyRadicalNav">Why Radical?</a>
</li>
<li>
<a href="#whyGiraffeNav">Why Giraffe?</a>
</li>