Maybe use the proper media query to add a margin-top to the second col-md-6?
On Friday, August 30, 2013 5:39:50 PM UTC-4, Chris Morley wrote: > > I am moving a form i wrote in bootstrap 2 across to responsive bootstrap 3. > > When the large grid is displayed there is nice spacing between all > elements. The below works OK for large viewports: > > [image: large viewport] > > When the viewport is minimized and small grid media selected, the > firstName and lastName wrap as intended, but it looks ugly as there is no > space between these two rows (like there is for the emailAddress and > companyName): > > [image: enter image description here] > > How can i make equal spacing between all elements the same between both > small and large grids, and specifically target the height between > col-sm-12 items within a form-group (as we have with firstName and > lastName)? > > Many thanks in advance. > > My code is below and *jsfiddle is here <http://jsfiddle.net/g18c/bpbDF/>*: > > <form class="form-horizontal" role="form"> > <div class="form-group"> > <div class="col-md-12"><label class="control-label">Billing > Contact</label></div> > </div> > <div class="form-group"> > <div class="col-md-6 col-sm-12"><input id="firstName" > class="form-control" type="text" data-bind="value: firstName, valueUpdate: > 'afterkeydown', attr: { placeholder: 'First Name' }" /></div> > <div class="col-md-6 col-sm-12"><input id="lastName" > class="form-control" type="text" data-bind="value: lastName, valueUpdate: > 'afterkeydown', attr: { placeholder: 'Last Name' }" /></div> > </div> > <div class="form-group"> > <div class="col-md-12"><input id="emailAddress" class="form-control" > type="text" data-bind="value: emailAddress, valueUpdate: 'afterkeydown', > attr: { placeholder: 'E-mail Address' }" /></div> > </div> > <div class="form-group"> > <div class="col-md-12"><input id="companyName" class="form-control" > type="text" data-bind="value: companyName, valueUpdate: 'afterkeydown', attr: > { placeholder: 'Company Name' }" /></div> > </div> > <div class="form-group"> > <div class="col-md-12"><label class="control-label">Billing > Address</label></div> > </div> > <div class="form-group"> > <div class="col-md-12"><input id="address1" class="form-control" > type="text" data-bind="value: address1, valueUpdate: 'afterkeydown', attr: { > placeholder: 'Street Address' }" /></div> > </div></form> > > -- You received this message because you are subscribed to the Google Groups "twitter-bootstrap" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
