Navbar以955px宽度切换

时间:2015-08-04 10:09:19

标签: twitter-bootstrap twitter

我实际上是用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

谢谢你们

0 个答案:

没有答案