2013-07-18 52 views
0

我创建了包含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/

回答

1

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

演示:jsfiddle.net/HdSEn/3

OR

如果你想在页面上显示框的整个宽度,增加而不是span6 span12

jsfiddle.net/HdSEn/5/

更新

<div class="span7 offset3 padded well"> 

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

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

+0

我有点糊涂了。标准网格有12列。我想我的箱子居中,宽度的一半(6跨度),所以它应该是span6 offset3?请在这里纠正我 – Misiu

+0

请参阅。你在同一个类中使用'span6 + offset3'。所以这里实际发生的应该是'margin-left:330px and width:570px'。如果你想为该部门划定边界,你应该使用6 + 3 = 9'span9'。我希望你能理解。或者如果你想在页面中心使用'span6',使用应该删除那个offset3。 – Selvamani

+0

我已经改变了我的标记只是有点:http://jsfiddle.net/Misiu/HdSEn/8/我只是添加边框只是为了直观地看到我的容器的大小。如果我将班级更改为'span8 offset2',我的div很好地居中,但是如果将班级更改为'span4 offset4'输入的'span6 offset3'出来。你能帮助吗? – Misiu

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