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>

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

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

有人解释我如何使用bootstrap设置相等的宽度 span *

Answer 1

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

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

我想知道它是否可能无法正常工作，因为你的表格已经布局了，好像它是一个表格上有“形式水平”的表格，但你实际上并没有这个课程到位

我不确定horixontal表单是否可以使用span *类来调整其输入元素的大小。

您可以尝试在元素上使用“input-block-level”类，看看是否适合您。

Answer 2

尝试添加“内联块级别”

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

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

2 个答案: