css - 引导程序中的简单形式和输入宽度错误

Question

我创建了包含 2 个输入和 2 个按钮的极其简单的表单。当我希望我的表格采用 6 个跨度宽度并居中时。

下面是我的代码：

<div class="container-fluid padded">
    <div class="row">
        <div class="container">
            <div class="row">
                <!--filtry-->
                <div class="span6 offset3 padded" style="border: 1px solid black;">
                    <form action="#" method="get" class="form-horizontal">
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label">Data od</label>
                                <div class="controls">
                                    <input type="text" id="dataOd" class="input-xlarge" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Data do</label>
                                <div class="controls">
                                    <input type="text" id="dataDo" class="input-xlarge" />
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="pull-right"> 
                                   <a class="btn wczytaj" href="#"><i class="icon-play icon-white"></i>Wczytaj</a>
                                   <a class="btn btn-info disabled eksportuj" href="#" id="eksportuj"><i class="icon-download-alt icon-white"></i>Eksportuj</a>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

我在全尺寸浏览器中的表单如下所示：

但在调整大小后，我得到了这个结果：

我应该如何更改我的代码以在每个分辨率上获得 100% 的输入宽度？有什么简单的方法还是我必须调整整个引导程序？
我尝试将 span* 类添加到输入中，但没有任何运气。SO上有类似的问题（https://stackoverflow.com/a/11193864/965722），但答案涉及JavaScript，我想避免这种情况。

这是带有我的代码的 jsfiddle：http: //jsfiddle.net/Misiu/HdSEn/

Answer 1

您需要增加跨度的宽度。设置 span8 而不是 span6。

演示：jsfiddle.net/HdSEn/3

或者

如果要在页面上显示全宽，请添加 span12 而不是 span6

jsfiddle.net/HdSEn/5/

更新

 <div class="span7 offset3 padded well">

问题是，form 大于 span7。像表单宽度> span7,6,5,4.... 所以你需要设置输入框的宽度。

演示：http: //jsfiddle.net/HdSEn/18

Answer 2

希望这可以解决您的问题：

JSFiddle 演示

CSS：

input[type="text"] {
    min-height:30px;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}