Question

我有以下标记

<form role="form">                      
   <div class="input-group">
    <label for="accountSpan">Account name</label>
                        <span class="input-group-addon" id="accountSpan">something</span>
                        <input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
                    </div>                                              
                    <div class="form-group">                             
                        <label for="exampleInputPassword1">Password</label>                         
                        <input type="password" class="form-control" id="exampleInputPassword1" />                       
                    </div>
    </form>

导致

如何让它像密码一样对齐？

Answer 1

请尝试以下操作： Demo

如果您使用form-group和input-group一样使用密码，则可以获得预期的输出。

<div class="form-group">

    <label for="accountSpan">Account name</label>
    <div class="input-group">
      <span class="input-group-addon" id="accountSpan">something</span>
      <input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">

    </div>
  </div>

Answer 2

 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

<form role="form"> 
<div class="input-group"> 
  <label for="accountSpan">Account name</label> 
  <span class="input-group-addon" id="accountSpan">something</span>
  <input type="text" class="form-control" placeholder="account name" 
  aria-describedby="basic-addon1" id="accountInput" > 
</div> 
<div class="form-group"> 
  <label for="exampleInputPassword1">Password</label> 
  <input type="password" class="form-control" id="exampleInputPassword1" /> 
</div>

Answer 3

您的答案jsFiddle：

<form role="form">      
       <div class="form-group">   
            <label for="accountSpan">Account name</label>
                <div class="input-group">
                    <span class="input-group-addon" id="accountSpan">something</span>
                    <input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
                </div>   
        </div>
        <div class="form-group">                             
            <label for="exampleInputPassword1">Password</label>                         
            <input type="password" class="form-control" id="exampleInputPassword1" />                       
        </div>
    </form>

bootstrap - 为span添加标签

3 个答案: