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
Post a Comment