CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dail
Dail

Reputation: 4606

Why does the width of inputs changes?

I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.

This is my simple form:

<form>
    <div class="controls-row">
        <div class="span3">
            <label class="control-label">A:</label>
            <div class="controls">
                <input type="text" class="span3"/>
            </div>                
        </div>
        <div class="span4">
            <label class="control-label">B:</label>
            <div class="controls">
                <input type="text" class="span4"/>
            </div>                
        </div>        
    </div>
    <div class="controls-row">
        <div class="span3">
            <label class="control-label">C:</label>
            <div class="controls">
                <select class="span3">
                    <option>1111111</option>
                    <option>2222222</option>
                    <option>3333333</option>
                </select>
            </div>                
        </div>
        <div class="span4">
            <label class="control-label">D:</label>
            <div class="controls">
                <input type="text" class="span4"/>
            </div>                
        </div>        
    </div>    
</form>

Using this code the select has a different width, it is NOT the same as <input> with span3 class.

It is very very strange because, if i put span3 in and (using the code above) the width is equal.

COuld someone explain me how can I set equal widths using bootstrap span*

Upvotes: 0

Views: 134

Answers (2)

Julian
Julian

Reputation: 1017

Try adding "inline-block-level"

http://twitter.github.com/bootstrap/base-css.html#forms

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

According to the Bootstrap doumentation using the span* classes on your inputs etc should work.

http://twitter.github.com/bootstrap/base-css.html#forms

I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.

I'm not sure if a horixontal form can use the span* classes to size it's input elements.

You could try using the "input-block-level" class on your elements instead and see if that does the job for you.

Upvotes: 1

Related Questions