How to mix class="form-horizontal" with ordinary form elements in a bootstrap form? -
how can mix class="form-horizontal" in single form form elements don't displayed horizontal? tag intended reside in <form>-tag according documentation.
conflicting part (form-horizontal-tag conflicts rest of form:
<form class="form-horizontal" role="form" action="/registrieren" method="post"> <div class="row"> <div class="col-md-2"> <label for="usr">surname:</label> <input type="text" class="form-control" id="vorname" name="vorname"> </div> <div class="col-md-2"> <label for="usr">name:</label> <input type="text" class="form-control" id="name" name="name"> </div> </div> <div class="row"> <div class="col-md-3"> <label for="usr">street:</label> <input type="text" class="form-control" id="strasse" name="strasse"> </div> </div> </form> a working horizontal form:
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="control-label col-sm-2" for="email">email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="enter password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">submit</button> </div> </div> </form> i'd have 1 single form, surname , name beside each other.
whole dokument:
<!doctype html> <html lang="de"> <head> <title>titel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>titel</h1> <p>bitte erfasse deine persönlichen angaben:</p> <form role="form" action="/registrieren" method="post"> <div class="row"> <div class="col-md-4"> <label class="radio-inline"><input type="radio" name="gender">frau</label> <label class="radio-inline"><input type="radio" name="gender">mann</label> <label class="radio-inline"><input type="radio" name="gender">anderes</label> </div> </div> <div class="row"> <div class="col-md-2"> <label for="usr">vorname:</label> <input type="text" class="form-control" id="vorname" name="vorname"> </div> <div class="col-md-2"> <label for="usr">name:</label> <input type="text" class="form-control" id="name" name="name"> </div> </div> <div class="row"> <div class="col-md-3"> <label for="usr">strasse:</label> <input type="text" class="form-control" id="strasse" name="strasse"> </div> </div> <div class="row"> <div class="col-md-1"> <label for="usr">plz:</label> <input type="text" class="form-control" id="plz" name="plz"> </div> <div class="col-md-2"> <label for="usr">ort:</label> <input type="text" class="form-control" id="ort" name="ort"> </div> </div> <div class="form-group" class="form-horizontal"> <label class="control-label col-sm-2" for="usr">email:</label> <div class="col-sm-3"> <input type="text" class="form-control" id="email" name="email"> </div> </div> <div class="form-group" class="form-horizontal"> <label class="control-label col-sm-2" for="pwd">password:</label> <div class="col-sm-3"> <input type="password" class="form-control" id="pwd" placeholder="enter password"> </div> </div> </div> <div class="form-group"> <div class="col-sm-3"> <button type="submit" class="btn btn-primary">submit</button> </div> </div> <br> </form> </div> </body> </html>
are talking this? check out snippet below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <form class="form-horizontal" role="form" action="/registrieren" method="post"> <div class="row"> <div class="col-xs-6"> <label for="usr">surname:</label> <input type="text" class="form-control" id="vorname" name="vorname"> </div> <div class="col-xs-6"> <label for="usr">name:</label> <input type="text" class="form-control" id="name" name="name"> </div> </div> <div class="row"> <div class="col-lg-12"> <label for="usr">street:</label> <input type="text" class="form-control" id="strasse" name="strasse"> </div> </div> </form> </div>
Comments
Post a Comment