Question

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

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

Answer 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因此问题

Bootstrap Form添加输入附加时的水平对齐问题

1 个答案: