javascript - Boostrap inline-forms layout -
i'm working bootstrap , i'm trying make simple page contains list of input boxes , dropdowns form-inline approach.
i form fields @ equal distances between them, and, if possibile, make size relative label , field length. ugly result get, explain:
as can see code below, gave col size of 3 each field trying make each row contain 4 inputs, result ugly: if label long can't see content of dropdown, spacing between each input depends on length of input, result not eye-catching.
the next problem vertical spacing between inputs. should in same form make single submit, , result when input requires new line. have nice vertical spacing don't know how to.
this code of page:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-it" lang="it-it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="../resources/miotema/favicon.ico" /> <title>tool fgfgfg</title> <script src="<c:url value="/resources/miotema/js/jquery-2.1.4.min.js" />" type="text/javascript" ></script> <script src="<c:url value="/resources/miotema/js/bootstrap.min.js" />" type="text/javascript" ></script> <script src="<c:url value="/resources/miotema/js/common.js" />" type="text/javascript" ></script> <link rel="stylesheet" href="<c:url value="/resources/miotema/css/bootstrap.min.css" />" type="text/css" /> </head> <body> <div class="navbar navbar-default"> <div class="container-fluid"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right menu header"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">test<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="<c:url value="/studi/visualizza" />">visualizza </a></li> <li><a href="<c:url value="/studi/crea" />">nuovo</a></li> <li class="divider"></li> <li><a href="#">voce menu separato</a></li> </ul> </li> <li><a href="javascript:chiamataajax()">chiamata ajax</a></li> <li><a href="javascript:dologoutaction()">logout</a></li> </ul> </div> </div> </div> <div class="container-fluid"> <form class="form-inline" action="<c:url value="/insert" />" method="post"> <div class="well bs-component"> <fieldset> <legend>inserimento dati</legend> <div class="form-group col-lg-3"> <div class="input-group"> <span class="input-group-addon"><strong>testtttttttttttt</strong></span> <select class="form-control" name="durata_contrattuale"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="form-group col-lg-3"> <div class="input-group"> <span class="input-group-addon"><strong>uahuaduhaudhtfftftftftftftfuadu</strong></span> <select class="form-control" name="capacita_banda"> <option>10 mb/s</option> <option>20 mb/s</option> <option>30 mb/s</option> <option>40 mb/s</option> <option>50 mb/s</option> <option>60 mb/s</option> <option>70 mb/s</option> <option>80 mb/s</option> <option>90 mb/s</option> <option>100 mb/s</option> <option>200 mb/s</option> <option>300 mb/s</option> <option>altro</option> </select> </div> </div> <div class="form-group col-lg-3"> <div class="input-group"> <span class="input-group-addon"><strong>fy</strong></span> <select class="form-control" name="opzione_realizzazione"> <option>basic</option> <option>plus</option> <option>ultra</option> </select> </div> </div> <div class="form-group col-lg-3"> <div class="input-group"> <span class="input-group-addon"><strong>dtddtdttd</strong></span> <select class="form-control" name="ultra_protezione"> <option>si</option> <option>no</option> </select> </div> </div> <div class="form-group col-lg-3"> <div class="input-group"> <span class="input-group-addon"><strong>blablabalbala</strong></span> <select class="form-control" name="lbublbu"> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> </fieldset> </div> </form> </body> </html> any hint?
first of missed "row" class element serve parent col-3's made. second there 5 col-3's**** means grid of 15 not 12 should be. try count of inputs should bigger others, , count down how many col's need. after make sum equal 12 , might try put width: 100%; input.
Comments
Post a Comment