Bootstrap: how do I make horizontal form's "inline-help" look better when it's too long? -
i feel line being inconsistent pretty ugly. there easy way can beautify it?
here basic example of i'm talking about: http://jsfiddle.net/tybwc/1/
<form class="form form-horizontal"> <div class='control-group'> <label class='control-label' for='inputwarning'>input warning</label> <div class='controls'> <input id='inputwarning' type='text'> <span class='help-inline'>something afdaf da</span> </div> </div> <div class='control-group'> <label class='control-label' for='inputwarning'>input warning</label> <div class='controls'> <input id='inputwarning' type='text'> <span class='help-inline'>something afdaf da afdaf da afdaf da afdaf da afdaf da afdaf da </span> </div> </div> </form>
as can see, when text short, looks nice, when overflows, goes down bottom, giving inconsistent look.
how go forcing long text stay right of form, using sort of 3-column layout? or possibly create larger top-margin if overflow bottom? , preferably, i'd keep responsive, smaller screens won't impacted negatively.
this trick.
.hil { width:200px; } <span class='help-inline hil'> long text </span>
see images below
Comments
Post a Comment