html - Bootstrap navbar displaying 2 rows when screen size is not mobile -

-

i'm using bootstrap3, trying build responsive navbar. @ normal resolutions, navbar taking 2 rows. @ small resolutions, (correctly) takes 1 row.

how can make link4 , link5 appear on same row links 1-3? (fiddle below code)

<div class="navbar navbar-inverse navbar-static-top" data-role="navigation">  <div class="navbar-header navbar-left">     <a class="navbar-brand" href="#">title</a>     <button type="button" class="navbar-toggle navbar-left left pull-left 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>     <button type="button" class="navbar-toggle navbar-right right pull-right collapsed navbar-link glyphicon glyphicon-user" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">     </button> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">     <ul class="nav navbar-nav navbar-left">         <li><a>link1</a></li>         <li><a>link2</a></li>         <li><a>link3</a></li>     </ul> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">     <ul class="navbar-nav nav navbar-right">         <li><a>link4</a></li>         <li><a>link5</a></li>     </ul> </div

http://jsfiddle.net/katgucbw/1/

add ul code inside #bs-example-navbar-collapse-1 below first ul. let have these links on same line on screen sizes larger 768px.

<ul class="navbar-nav nav navbar-right hidden-xs" style="margin-right: 10px">     <li><a>link4</a></li>     <li><a>link5</a></li> </ul>

also, inside #bs-example-navbar-collapse-2, add hidden-sm, hidden-md, , hidden-lg classes on last ul show on phones (<768px).

official documentation on responsive utilities

full code:

<div class="navbar navbar-inverse navbar-static-top" data-role="navigation">      <div class="navbar-header navbar-left">         <a class="navbar-brand" href="#">title</a>         <button type="button" class="navbar-toggle navbar-left left pull-left 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>         <button type="button" class="navbar-toggle navbar-right right pull-right collapsed navbar-link glyphicon glyphicon-user" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">         </button>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">         <ul class="nav navbar-nav navbar-left">             <li><a>link1</a></li>             <li><a>link2</a></li>             <li><a>link3</a></li>         </ul>          <ul class="navbar-nav nav navbar-right hidden-xs" style="margin-right: 10px">             <li><a>link4</a></li>             <li><a>link5</a></li>         </ul>      </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">         <ul class="navbar-nav nav navbar-right hidden-sm hidden-md hidden-lg">             <li><a>link4</a></li>             <li><a>link5</a></li>         </ul>     </div>  </div>

working bootply


Comments

Post a Comment

Popular posts from this blog

javascript - how to protect a flash video from refresh？ -

-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flash video refresh</title> </head> <body> <div id="playerzone"><embed height="496" width="580" flashvars="flvid=19742822&amp;createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div> <a onclick="return test();" id="test">click me popup div,and hide scrollbar</a> </body> the code upon： for example,when click a#test button,popup div,it's no problem,but want hide scrollbar while div popup. i used $('html').css('overflow','hidden') in...
Read more

visual studio 2010 - Connect to informix database windows form application -

-
i trying figure out how connect ibm informix database. have been doing research , have found threads 5 years ago examples not working. i have installed latest sdk ibm informix. i have included ibm.data.informix.dll references in project. i have included using ibm.data.informix; i adding button , on click testing conenction. debug error "sql0035n file "c:\users\adam\documents\visual studio 2010\projects\test\test\msg\en_us\db2nmp.xml" cannot opened." this file not exist , dont see anywhere in program files (x86)\ibm informix client sdk directory. my on click code is private void button1_click(object sender, eventargs e) { const string host = "192.168.obfuscated"; const string servicenum = "1525"; //port? const string server = "serverobfuscated"; const string database = "dbobfuscatedy"; const string user = "myusername"; const string password = ...
Read more

android - Associate same looper with different threads -

-
Image
in application, want create multiple threads working on single queue. create queue know need call looper.prepare() . i want other threads create should associated looper created first thread, how can achieve this? use 1 of java thread safe queue class java.util.concurrent package instead of looper achieve goal. it's more common practice. share queue between threads , post task queue entry 1 thread can entry thread. blockingqueue can - in 1 thread call take() , block thread until thread put() entry queue. that's all. producer consumer pattern example blockingqueue or concurrentlinkedqueue about blockingqueue
Read more