html - Why won't my form display? -


i'm using bootstrap 3 bootswatch theme. here html:

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>title</title>      <!-- bootstrap -->     <link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css" rel="stylesheet">      <!-- html5 shim , respond.js ie8 support of html5 elements , media queries -->     <!-- warning: respond.js doesn't work if view page via file:// -->     <!--[if lt ie 9]>     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>     <![endif]--> </head> <body>      <div class="navbar navbar-default navbar-fixed-top" role="navigation">         <div class="container">             <div class="navbar-header">                 <button type="button" data-toggle="collapse" data-target=".navbarcollapse" class="navbar-toggle">                     <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="#">licenseapp</a>             </div>             <div class="collapse navbar-collapse">                 <ul class="nav navbar-nav">                     <li class="active"><a href="#">dashboard</a></li>                     <li><a href="#">nav 1</a></li>                     <li><a href="#">nav 2</a></li>                 </ul>             </div>         </div>     </div>      <div class="container">       <div class="row">         <div class="col-md-12">             <form class="form-horizontal" role="form">                 <div class="form-group">                     <label class="col-sm-2 control-label" for="">username</label>                     <div class="col-sm-10">                         <input class="form-control" name="username" type="text" />                     </div>                 </div>             </form>         </div>     </div>       </div>      <!-- jquery (necessary bootstrap's javascript plugins) -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     <!-- include compiled plugins (below), or include individual files needed -->     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body> </html> 

any ideas why i'm having many problems? missing div or something?

your form placed under navbar because navbar fixed @ top.

with following css rules:

.navbar-fixed-top {    top: 0;    border-width: 0 0 1px; } 

therefore, either push form more down or make navbar not fixed, example remove navbar-fixed-top element:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 

therefore, displays jsfiddle example

or @jamesking56 noticed, changing navbar-fixed-top navbar-static-top works


Comments

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -