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

desktop layout

responsive layout


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -