添加输入附加时的引导表单水平对齐问题答案

【问题标题】：Bootstrap Form Horizontal alignment issue when added input append添加输入附加时的引导表单水平对齐问题
【发布时间】：2013-06-19 19:27:54
【问题描述】：

我正在尝试创建一个简单的基本表单，当向表单添加 input-append 类时无法实现水平布局，它会踢第二个输入框以显示在同一行？想知道代码错误在哪里？请提出导致问题的原因

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

【问题讨论】：

你能创造一个小提琴吗？您在寻找form-inline 或horizontal-form 吗？
我只在寻找水平形式，当我去掉“input-append”类和 span 标签时，我得到了水平视图，但是当我将 input-append 类添加到 div 时，输入没有水平对齐
对不起。我问我问的原因是，事情看起来对我来说很好：jsfiddle.net/zFmjG
Karthik，你应该看看这张照片，看起来还可以，但不知道为什么？，看这个 - imgur.com/LRPjEXf
现在明白了 :) 谢谢。请检查答案

标签： forms twitter-bootstrap alignment

【解决方案1】：

我会把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 因此问题

【讨论】：

绝对正确，添加 Div 的额外负担，谢谢你结束了我的痛苦:)