bootstrap form-horizo​​nal縮略圖內部創建不對齊 - 響應

Question

我一直在尋找一個解決我的引導問題的工作與表單佈局的答案。到目前爲止，沒有運氣！

目的：

創建一個註冊表單，在平板電腦中/桌面/ iphone

問題：

我用縮略圖，因爲它有我需要在表單框中的所有CSS。我使用了橫向的形式。桌面上的佈局是可以的，一切都是對齊的。直到我在下面的ipad（肖像）：圖片上查看它;

- 抱歉，這是我第一次發佈，因此我沒有足夠的時間發佈圖片。它看起來是這樣的：

http://dl.dropbox.com/u/21743176/Screen%20Shot%202012-11-26%20at%203.26.13%20PM.png

第一個輸入框使用span6，而其餘的都沒有。即使使用span6，控件（標籤和輸入）也不居中。我可以減少標籤的寬度是什麼，這樣它會對準中心，但是這將意味着加入特定@media寬度等

這裏是我的HTML的快照：

<div class="container"> 
     <div class="row-fluid"> 
      <div class="section"> 
       <ul class="thumbnails row"> 
        <li class="span6 offset3"> 
         <div class="thumbnail"> 
           <div class="caption"> 
            <legend><h5><i class="icon-pencil"></i> Sign-up</h5></legend> 
            <form action="signup/user_signup" class="form-horizontal" method="POST" id="signup-form"> 
             <fieldset> 
             <div class="control-group" id="Name"> 
              <label for="inputName" class="control-label">Name</label> 
              <div class="controls"> 
               <input type="text" name="inputName" class="span6"/> 
              </div> 
             </div> 
             <div class="control-group" id="Email"> 
              <label for="inputEmail" class="control-label">Email</label> 
              <div class="controls"> 
               <input type="text" name="inputEmail" /> 
              </div> 
             </div> 
             <div class="control-group" id="Username"> 
              <label for="inputUsername" class="control-label">Username</label> 
              <div class="controls"> 
               <input type="text" name="inputUsername" id="inputUsername"/> 
              </div> 
             </div> 
             <div class="control-group" id="Pwd"> 
              <label for="inputPwd" class="control-label">Password</label> 
              <div class="controls"> 
               <input type="password" name="inputPwd" id="inputPwd"/> 
              </div> 
             </div> 
             <div class="control-group" id="CPwd"> 
              <label for="inputConfirmPwd" class="control-label">Confirm Password</label> 
              <div class="controls"> 
               <input type="password" name="inputConfirmPwd" id="inputConfirmPwd"/> 
              </div> 
             </div> 
             <div class="control-group" id="TNC"> 
              <div class="controls"> 
               <label class="checkbox"> 
                <input type="checkbox"> Accept terms and conditions 
               </label> 
              </div> 
             </div> 
             <div class="control-group"> 
              <div class="controls"> 
               <button type="cancel" class="btn">Cancel</button> 
               <button type="submit" class="btn btn-primary">Send</button> 
              </div> 
             </div> 
             </fieldset> 
            </form> 
           </div> 
         </div> 
        </li> 
        <li class="span3"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

問題：

什麼時候使用form-inline或form-horizo​​ntal。有人說，要使用橫向格式，你必須有一個寬泛的頁面......不知道它是否屬實。

那麼，你可以讓我知道，如果我的HTML /方法不好？

現在幾天一直在掙扎着。

乾杯

Answer 1

Fiddle

我發現一對夫婦的使用寬度的例子：100％，迫使文本框留在他們的容器內。它以大頁面爲中心，但在桌面上擴展到邊緣，並且在手機上它將從form-horizo​​ntal切換到form-inline。

.my-input 
{ 
    width: 100%; 
    padding: 4px 0 4px 0 !important; 
} 

<input class="my-input" maxlength="80" type="text" name="inputName" />