桌面

Question

我有一个Bootstrap 3导航栏。在移动设备上一切正常，但在桌面尺寸下，当点击导航链接时，导航栏的“移动”折叠版本会闪烁。我只是不想在桌面上看到这个。

You can view a bootply here.

我对网络开发相当陌生，所以如果我的代码无组织或草率，我会道歉。代码是......

/* 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>

Answer 1

这是因为您每次点击链接时都会定位导航栏折叠。究竟为什么导航栏表现得很有趣：

Bootply Link

而不是：

<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>