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" />