html - Simple Bootstrap site - the navigation bar keeps covering my main content. Any idea why? -

-

here html.

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <!-- html5 shim ie backwards compatibility --> <!--[if lt ie 9]>       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>     <![endif]--> </head>  <body> <div class="container-fluid">   <div class="row-fluid">     <nav class="navbar navbar-inverse">       <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span> </a>         <div class="nav-collapse">           <ul class="nav">             <li class="active"><a href="#">home</a> </li>             <li><a href="#">about</a></li>             <li><a href="#">work</a></li>             <li><a href="#">resume</a></li>             <li><a href="#">contact</a></li>           </ul>         </div>       </div>     </nav>   </div> </div> <div class="container-fluid">   <div class="row-fluid">     <div class="headline">       <header class="span8">         <h1>headline goes here</h1>       </header>     </div>   </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html>

in css, have nothing positioning changed or anything—just colors , spacing , whatnot. have .navbar .nav > ul property set display:box; affecting it?

let me know if need more info

here's jsfiddle, without bootstrap files: http://jsfiddle.net/6prhf

using following styles space out nav bar items, depending on how want styles can customize it. should close want hopefully.

css file

/* customize navbar links fill entire space of .navbar */ .navbar .navbar-inner {     padding: 0; }  .navbar .nav {     margin: 0;     display: table;     width: 100%; }  .navbar .nav li {     display: table-cell;     width: 1%;     float: none; }  .navbar .nav li {     font-weight: bold;     text-align: center;     border-left: 1px solid rgba(255, 255, 255, .75);     border-right: 1px solid rgba(0, 0, 0, .1); }  .navbar .nav li:first-child {     border-left: 0;     border-radius: 3px 0 0 3px; }  .navbar .nav li:last-child {     border-right: 0;     border-radius: 0 3px 3px 0; }

similar stack overflow question

bootstrap navbar justify / span menu items occupying full width


Comments

Post a Comment

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

-
the current version of mozilla firefox 23.0.1, version not support play mp3 shoutcast streams tcp port different 80 (most common 8000 shoutcast 1.9.8). i use flash when mp3 support not available in html5 audio, way detect is: try{ var = document.createelement('audio'); r = !!(a.canplaytype && !!a.canplaytype("audio/mpeg; codecs=mp3").replace(/^no$/,'')) }catch(e){ r = false; } the support mp3 shoutcast streams in firefox added in version 24 . a.canplaytype("audio/mpeg; codecs=mp3") = in chrome , firefox, chrome support, firefox not support, due current code detect not work firefox. the current version of jquery support ie 6 1.10.2, version not has .browser i think "stylized" way testing features , not querying browsers / versions, notwithstanding here see hard not violate "principle". what "stylized" way of detect mp3 icy support without navigator.useragent in firefox? ther...
Read more

web - SVG not rendering properly in Firefox -

-
i have problem svg renderring in firefox. whilst works in safari, chrome or in ie, doesn't work in firefox. inspecting element seems layers there, background visible if it's z-index higher z-index of others. rendered in firefox: svg logo in firefox link original source file: svg file thanks help. ps: used sketch 3 export svg. if helps somehow. you're experiencing bug 995813 . i fixed bug time ago change still making way through release process example display correctly firefox 31 onwards released on 22 july 2014. in meantime if move fill="white" <mask> element child <use> element work around firefox bug.
Read more

java - JavaFX 2 slider labelFormatter not being used -

-
i have following code not label slider "foo50", etc... 1 expect setlabelformatter call, instead seems have no effect (the slider labelled 50, 100, etc , println's dont run). there missing? not implemented in default 2.2 skin? using oracle java 7 package javafxbugtest; import javafx.application.application; import javafx.scene.*; import javafx.scene.control.*; import javafx.stage.*; import javafx.util.stringconverter; public class javafxbugtest extends application { @override public void start(final stage primarystage) { slider cp = new slider(); cp.setlabelformatter(new stringconverter<double>() { @override public string tostring(double t) { system.out.println("nope?"); return "foo" + t.tostring(); } @override public double fromstring(string string) { system.out.println("he...
Read more