bootstrap, row into navbar -
is possible turn col navbar?
i've got top navbar. i'd 1 below turn navbar md , lower screens.
<div class="row" id="bottominforow"> <div class="col-md-4"> <ul class="list-inline"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>
honestly, maybe you're looking isn't clear far functionality goes it's pretty simple.
the example uses columns in conjunction navbar-nav class while using css adjust custom navbar class enclosed in.
(**most of css better display in general , not neccessary)
see working example snippet @ full page.
.navbar.nav-lower { background: #eee; margin-top: -20px; border-radius: 0; border: none; text-align: center; } .navbar.nav-lower .navbar-nav { float: none; } .navbar.nav-lower .navbar-nav > li { display: inline-block; float: none; margin: 0 -5px; vertical-align: middle; } .navbar.nav-lower .navbar-toggle, .navbar.nav-lower .navbar-toggle:hover, .navbar.nav-lower .navbar-toggle:focus { border: none; background: none; } @media (min-width: 768px) { .navbar.nav-lower { background: none; } .navbar.nav-lower .navbrand-hidden { display: none; } } /**use rule display links block**/ /*@media (max-width: 767px) { .navbar.nav-lower .navbar-nav > li { display: block; text-align: left; width: 100%; } }*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-top" 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 nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-top"> <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> </ul> </div> </div> </nav> <div class="container-fluid"> <nav class="navbar navbar-default nav-lower"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-bottom" 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 navbrand-hidden" href="#">collapse nav</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-bottom"> <div class="row" id="bottominforow"> <div class="col-sm-4"> <ul class="nav navbar-nav"> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> </ul> </div> <div class="col-sm-4"> <ul class="nav navbar-nav"> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> </ul> </div> <div class="col-sm-4"> <ul class="nav navbar-nav"> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> <li><a href="#">link</a> </li> </ul> </div> </div> </div> </nav> </div>
Comments
Post a Comment