Bootstrap 3 + Daha az - büyük ekranlarda collapse-navbar'ı devre dışı bırakma

Elde etmeye çalıştığım şey, küçük ekranlarda çöken, ancak daha büyük boyutlarda olmayan bir navbar. Şu anda herhangi bir boyutta daraltılmış. Peki, daha büyük ekranlarda daraltmayı devre dışı bırakmayı nasıl başarabilirim. Benim HTML:Bootstrap 3 + Daha az - büyük ekranlarda collapse-navbar'ı devre dışı bırakma

<nav role="navigation" class="row"> 
 
    <div id="nav-toggle" class="col-xs-12 col-sm-12 hidden-md hidden-lg"> 
 
    <p> 
 
     <a href="#" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
     <span class="fa fa-bars">Menü</span> 
 
     </a> 
 
    </p> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "> 
 
    <div id="navbar-collapseY" class="navbar collapse collapse-navbar"> 
 
     <ul class="nav nav-pills nav-justified"> 
 
     <li class="active"> 
 
      <a href=""> 
 
      <span class="glyphicon glyphicon-home active"><span class="sr-only">Home</span></span> 
 
      </a> 
 
     </li> 
 
     ... 
 
     <li> 
 
      <a href="kontakt.html"> 
 
      Kontakt 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Benim CSS: Yardımlarınız için

#nav-toggle p { 
 
    a { 
 
    color: white; 
 
    } 
 
    font-size:@font-size-base * 1.15; 
 
    text-align:center; 
 
} 
 
.nav li a { 
 
    color: white; 
 
    font-weight: bolder; 
 
} 
 
.nav-pills:hover, 
 
.nav-justified:hover, 
 
.nav-pills:focus, 
 
.nav-justified:focus { 
 
    background-color: transparent; 
 
}

THX. Bu u istediğiniz şeydir

kaynak

2016-04-09 andi-g

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Navbar</title> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- 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" aria-expanded="false"> 
 
     <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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
</body> 
 
</html>

kaynak

2016-04-10 07:10:03 Manish62

Bootstrap 3 + Daha az - büyük ekranlarda collapse-navbar'ı devre dışı bırakma

cevap

İlgili konular