How to align elements in a bootstrap-form

问题

Pls. have a look at my code @ http://www.bootply.com/VcVDblSFK7 - I would like to have the span with the key-symbol and the input-control in the same row (followed by the span for the error-msg). but I've done too much editing and am not seeing a way out of this.

<div class="row">
  <div class="col-md-8">
    <div class="col-md-3">
      <div class="input-group">
        <span class="fa fa-key fa-fw input-group-addon"></span>
        <input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">
      </div>
    </div>
    <span id="oldpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="col-md-3">
      <div class="input-group">
        <span class="fa fa-key fa-fw input-group-addon"></span>
        <input id="newpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">
      </div>
    </div>
    <span id="newpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="col-md-3">
      <div class="input-group">
        <span class="fa fa-key fa-fw input-group-addon"></span>
        <input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">
      </div>
    </div>
    <span id="reppswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>

回答1:

Are you looking for something like this? http://www.bootply.com/RBjyGORKLe

    <div class="row">
  <div class="col-md-8">
    <div class="form-inline col-md-3">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">   
            </div>
        </div>      
    </div>
    <span id="oldpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="form-inline col-md-3">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="oldpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">   
            </div>
        </div>      
    </div>
    <span id="newpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="form-inline col-md-3">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">   
            </div>
        </div>      
    </div>
    <span id="reppswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>

来源：https://stackoverflow.com/questions/30738304/how-to-align-elements-in-a-bootstrap-form

标签

css

twitter-bootstrap

font-awesome