Bootstrap表單添加輸入附加時水平對齊問題

我正在嘗試創建一個簡單的基本表單，當向表單添加input-append類時無法實現水平佈局，它會踢第二個輸入框以顯示在同一條線？想知道代碼錯誤在哪裏？請建議是什麼原因造成的問題Bootstrap表單添加輸入附加時水平對齊問題

 <body> 
     <div class="container"> 
      <hr/> 

      <form class="form-horizontal"> 
      <!--<span class="offset2">Sign Into the Email</span>--> 
       <div class="control-group"> 

        <div class="controls"><span>Welcome to My Email</span></div> 

       </div> 

       <div class="control-group input-append"> 
        <label for="emailid" class="control-label">Email id</label> 
       <div class="controls"> 

        <input type="text" /> 
        <span class="add-on">@</span> 

        </div> 
       </div> 

       <div class="control-group input-append"> 
        <label for="passwd" class="control-label">Password</label> 
        <div class="controls"> 
         <input type="password" /> 
         <span class="add-on">***</span> 
        </div> 
       </div> 

       <div class="control-group"> 
        <div class="controls" > 
        <label class="checkbox"> 
         <input type="checkbox" />Remember Me 
        </label> 
        <button class="btn">Sign In</button> 
        </div> 
       </div> 
      </form> 

     </div>  
      <script src="js/jquery.js"></script> 
      <script src="js/bootstrap.js"></script>  
     </body>

來源

2013-06-22 CodeGeeek

可以在創建一把小提琴？你在尋找'form-inline'還是'horizontal-form'？ – karthikr

我正在尋找水平形式，當我的「輸入附加」類和跨度標籤的條狀我得到水平查看，但是現在我添加輸入附加類到div輸入arent水平對齊 – CodeGeeek

我很抱歉。我問我問什麼的原因是，事情對我來說看起來很好：http://jsfiddle.net/zFmjG/ – karthikr

我只想把input-append在內部div

<div class="control-group"> 
    <div class="input-append"> 
     <label for="emailid" class="control-label">Email id</label> 
     <div class="controls"> 
      <input type="text" /> <span class="add-on">@</span> 

     </div> 
    </div> 
</div>

入住這fiddle

.input-append有display: inline-block因此，問題

來源

2013-06-22 23:22:52 karthikr

絕對正確，額外負擔的Div，謝謝你設置一個結束我的苦難:) – CodeGeeek

Bootstrap表單添加輸入附加時水平對齊問題

回答

相關問題