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

时间:2013-07-18 09:26:13

标签: css twitter-bootstrap

我创建了非常简单的表单,其中包含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>

我在全尺寸浏览器中的表单如下所示: enter image description here

但在调整大小后我得到了这个结果: enter image description here

如何更改我的代码以使每个分辨率的输入100%? 有没有简单的方法或者我必须调整整个引导程序? 我尝试在输入中添加span *类但没有运气。 SO上有类似的问题(https://stackoverflow.com/a/11193864/965722),但答案涉及JavaScript,我想避免这种情况。

以下是我的代码jsfiddle:http://jsfiddle.net/Misiu/HdSEn/

2 个答案:

答案 0 :(得分:2)

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

演示:jsfiddle.net/HdSEn/3

OR

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

jsfiddle.net/HdSEn/5 /

<强>更新

 <div class="span7 offset3 padded well">

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

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

答案 1 :(得分:0)

希望这能解决您的问题:

<强> JSFiddle Demo

<强> CSS

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