我实际上是用Twitter Bootstrap编写网站,我的导航栏和徽标有点问题;正如您所看到的,当您拥有955px的屏幕宽度时,菜单和徽标将被替换,顶部的徽标和菜单向下;我只想知道如何将两者放在同一行或禁用菜单并显示切换按钮。
我给你的HTML和我的CSS代码
.navbar-nav > li > a {color:#fff;
-webkit-transition: color .5s ease-in;
-moz-transition: color .1s ease-in;
-o-transition: color .1s ease-in;
transition: color .1s ease-in;}
.navbar-nav > li > a:hover {color:#ff821d!important;}
.navbar-nav > .active a {color:#ff821d!important; background:transparent!important;}
.navbar-toggle {background-color:#000; color:#ff821d!important; border:none;}
.navbar-toggle:hover {background-color:#000!important; color:#ff821d!important;}
.icon-bar {color:#ff821d!important;}
.dropdown a {font-weight:300!important;}
.dropdown-menu {padding: 0px !important;}
.dropdown-menu > li > a {background-color:#000!important; border:none; text-align:right;}
<header>
<div class="header-cover">
<nav class="navbar navbar-default navbar-fixed-top header-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.html"><img src="design/Expert_Vide_Maison_logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">ACCUEIL</a></li>
<li><a href="qui_sommes_nous.html">QUI SOMMES-NOUS</a></li>
<li><a href="expertise.html">EXPERTISE</a></li>
<li><a href="nous_achetons.html">NOUS ACHETONS</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="index_nl.html"><img src="design/flag-nl.png"></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
你可以在线chek http://deluxe-art.fr/expert/index.html
谢谢你们