css - Bootstrap - Fluid navbar items -

-

i'm newbie bootstrap user, want create fluid navigation bar, when shrink browser navigation bar becomes weird.

before shrinking:

enter image description here

after shrinking further:

enter image description here

as can see, second image pretty bad.. 1 possible way thought separate words 2 lines (e.g. line 1 - goto, line 2 - hello_world!). can give me better approach issue? in advance.

current html code:

<nav class="navbar navbar-default">   <div class="container-fluid">     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand logo-container" href="#"><img class="logo" alt="logo" src="images/test.png" /></a>     </div>     <div class="collapse navbar-collapse" id="mynavbar">       <ul class="nav navbar-nav navbar-right">         <li><a href="#"><span class="code">goto </span><span class="section-name">hello_world!</span></a></li>         <li><a href="#"><span class="code">goto </span><span class="section-name">about_me</span></a></li>         <li><a href="#"><span class="code">goto </span><span class="section-name">life_graph</span></a></li>         <li><a href="#"><span class="code">goto </span><span class="section-name">skill_trees</span></a></li>         <li><a href="#"><span class="code">goto </span><span class="section-name">feat_stacks</span></a></li>         <li><a href="#"><span class="code">goto </span><span class="section-name">codetact_me</span></a></li>       </ul>     </div>   </div> </nav>

here fiddle...

if understanding quesetion correct can use .row & .col block menu new row

<nav class="navbar navbar-default">   <div class="container-fluid">     <div class="row">       <div class="navbar-header col-sm-1">         ...       </div>       <div class="col-sm-11">         <div class="collapse navbar-collapse" id="mynavbar">           ...         </div>       </div>     </div>   </div> </nav>

you can change col-md-xx make wider or smaller

for more info http://getbootstrap.com/css/#grid


Comments

Post a Comment

Popular posts from this blog

node.js - How to mock a third-party api calls in the backend -

-
i'm testing application mocha , supertest, test like var request = require('supertest'), app = require('./bootstrap.js'); describe('...', function() { it('...', function() { request(app) .get('/some/url') // ... }); }); the bootstrap.js real application before listen ports all works perfect have add calls third-party api , testing slow so when do, test example takes 5 seconds request(app) .get('/my/endpoint/that/makes/call/others') // ... how can make fake calls during test real when running application? you can use nock purpose.
Read more

java - Could not locate OpenAL library -

-
i writing game using slick2d library, uses lwjgl. lwjgl version 2.9.3. using netbeans 8. i tried adding sounds game, example music track on main menu. problem is, exception when run game, despite game still compiling , running except sound of course: sat mar 21 01:23:57 edt 2015 error:could not locate openal library. org.lwjgl.lwjglexception: not locate openal library. @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:102) @ org.lwjgl.openal.al.create(al.java:206) @ org.newdawn.slick.openal.soundstore$1.run(soundstore.java:295) @ java.security.accesscontroller.doprivileged(native method) @ org.newdawn.slick.openal.soundstore.init(soundstore.java:292) @ org.newdawn.slick.music.<init>(music.java:156) @ org.newdawn.slick.music.<init>(music.java:75) @ view.mainmenu.init(mainmenu.java:58) i didn't include rest of error states error happens in game code. the...
Read more

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

-
i want check scene image against 2 train images. that, detect features , compute descriptors of both training images. before detecting, computing , matching scene image, delete matches of train1 , train2. because these matches won't facilitate matching of scene image train1 , train2. so, match train1 train2 , vector of matches trainidx , queryidx. how can delete these matches in keypoints-vector , descriptor matrix of train1 , train2? best regards, dwi i have done below: std::vector<cv::keypoint> keypoints[2]; cv::mat descriptor[2]; std::vector< cv::dmatch > matches; /* write code generate keypoints, descriptors , matches here... keypoint[0] -> train image 1 keypoints keypoint[1] -> train image 2 keypoints descriptor[0] -> train image 1 descriptors descriptor[1] -> train image 2 descriptors matches -> matched between train image 1 , 2 */ // logic keep unmatched keypoints , corresponding descriptor...
Read more