html - 为什么输入的宽度会发生变化？

Question

我正在使用 Bootstrap v2.1.1。我发现输入宽度有问题。

这是我的简单表格：

<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>     

使用此代码，选择具有不同的宽度，它<input>与span3类不同。

这很奇怪，因为如果我将 span3 放入并且（使用上面的代码）宽度是相等的。

有人能解释一下我如何使用引导跨度设置相等的宽度*

Answer 1

根据 Bootstrap doumentation，在您的输入等上使用 span* 类应该可以工作。

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

我想知道它是否可能不起作用，因为您的表单布局好像它是一个带有“form-horizo​​ntal”类的表单，但您实际上并没有该类。

我不确定水平形式是否可以使用 span* 类来调整其输入元素的大小。

您可以尝试在您的元素上使用“输入块级”类，看看它是否适合您。

Answer 2

Try adding "inline-block-level"

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