Search code examples
csshtmltwitter-bootstraptwitter-bootstrap-2

offset class not applied into a bootstrap 2 form


should be an easy one.

Why does the offsetX class not work on the 2 last divs?

<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
            <div class="controls  ">
                <input class="span12" type="text" placeholder=".span12">
            </div>
            <div class="controls controls-row ">
                <input class="span4" type="text" placeholder=".span4"> 
                <input class="span8" type="text" placeholder=".span8">
            </div>
            <div class="controls controls-row ">
                <input class="span9" type="text" placeholder=".span9"> 
                <input class="span3" type="text" placeholder=".span3">
            </div>
            <div class="controls controls-row ">
                <input class="span6" type="text" placeholder=".span6"> 
                <input class="span6" type="text" placeholder=".span6">
            </div>
                        <div class="controls controls-row ">
                <input class="span4" type="text" placeholder=".span4"> 
                <input class="span6 offset2" type="text" placeholder=".span6 offset2">
            </div>
                                    <div class="controls controls-row ">
                <input class="span4 offset2" type="text" placeholder=".span4 offset2"> 
                <input class="span6 " type="text" placeholder=".span6 ">
            </div>
        </form>

can be tested here: http://jsfiddle.net/b0zqnmbL/


Solution

  • Not elegant at all, but so far I get better results than Megh Vidani and Manoj Kumar's solutions:

    ...
    <div class="controls controls-row">
        <input class="span4" type="text" placeholder=".span4">
        <label class="span2"   ></label>
        <input class="span6" type="text" placeholder=".span6 offset2">
    </div>
    ...
    

    Ugly but 100% efficient. All feel free to post more elegant solutions.