自舉中的簡單形式和輸入寬度錯誤

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

來源

2013-07-18 Misiu

你需要增加跨度的寬度。設置span8而不是span6。

演示：jsfiddle.net/HdSEn/3

如果你想在頁面上顯示框的整個寬度，增加而不是span6 span12

jsfiddle.net/HdSEn/5/

更新

<div class="span7 offset3 padded well">

問題是，表單比span7大。像窗體寬度> span7,6,5,4 ....所以你需要設置輸入框的寬度。

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

來源

2013-07-18 09:36:52 Selvamani

我有點糊塗了。標準網格有12列。我想我的箱子居中，寬度的一半（6跨度），所以它應該是span6 offset3？請在這裏糾正我 – Misiu

請參閱。你在同一個類中使用'span6 + offset3'。所以這裏實際發生的應該是'margin-left：330px and width：570px'。如果你想爲該部門劃定邊界，你應該使用6 + 3 = 9'span9'。我希望你能理解。或者如果你想在頁面中心使用'span6'，使用應該刪除那個offset3。 – Selvamani

我已經改變了我的標記只是有點：http://jsfiddle.net/Misiu/HdSEn/8/我只是添加邊框只是爲了直觀地看到我的容器的大小。如果我將班級更改爲'span8 offset2'，我的div很好地居中，但是如果將班級更改爲'span4 offset4'輸入的'span6 offset3'出來。你能幫助嗎？ – Misiu

希望這能解決您的問題：

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

來源

2013-07-18 09:44:33 Girish

自舉中的簡單形式和輸入寬度錯誤

回答

相關問題