html - Two column grid without using row class -
i generating html pages @ run time of freemarker. poses limitation on html generation part.
show input fields in 2 grid column, need define each row , place fields in it.
current html
<body class="container"> <div class="section-outline"> <div class="row-fluid show-grid"> <div class="span6 form-inline"><label class="poclabel">first name:</label><input type="text" required/></div> <div class="span6 form-inline"><label class="poclabel">middle initial:</label><input type="text" /></div> </div> <div class="row-fluid show-grid"> <div class="span6 form-inline"><label class="poclabel">last name:</label><input type="text" required/></div> <div class="span6 form-inline"><label class="poclabel">social security number:</label><input type="text"/></div> </div>
can same result without putting span6 divs in row? want same result like:
<div class="span6 form-inline"><label class="poclabel">first name:</label><input type="text" required/></div> <div class="span6 form-inline"><label class="poclabel">middle initial:</label><input type="text" /></div> <div class="span6 form-inline"><label class="poclabel">last name:</label><input type="text" required/></div> <div class="span6 form-inline"><label class="poclabel">social security number:</label><input type="text"/></div> here
.show-grid [class*="span"] { text-align: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; min-height: 40px; line-height: 40px; margin-top: 10px; display: inline; } label.poclabel { width: 200px; vertical-align: middle; } .section-outline { position: relative; margin: 15px 0; padding: 39px 19px 14px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
is looking : http://jsfiddle.net/wa2yq/
.span6.form-inline { display:inline-block; width:49%; } .span6.form-inline label { width:200px; display:inline-block; } or http://jsfiddle.net/wa2yq/1/
.span6.form-inline { float:left; width:50%; } .span6.form-inline label { width:200px; display:inline-block; } or else ?
Comments
Post a Comment