html - 如何使 Bootstrap 表单字段水平

Question

我已经尝试了所有可能的方法，但我无法让字段水平对齐。

<form class="form-horizontal" role="form">
    <div class="form-inline">
        <div class="form-group">
        <label for="acctName" class="col-sm-2 control-label">Account Name </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
        </div>
        </div>
    </div>
    <div class="form-inline">
        <div class="form-group">
        <label for="acctId" class="col-sm-2 control-label">Account ID &nbsp;&nbsp;&nbsp;&nbsp;  </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
        </div>
        </div>
    </div>

我也试过

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="acctName" class="col-sm-2 control-label">Account Name </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
        </div>
    </div>

    <div class="form-group">
        <label for="acctId" class="col-sm-2 control-label">Account ID &nbsp;&nbsp;&nbsp;&nbsp;  </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
        </div>
    </div>  

仍然，字段显示为垂直堆叠。

我做错了什么？

Answer 1

检查这个:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">  
  <div class="form-group">
      <label for="acctName" class="control-label">Account Name </label>
      <input type="text" class="form-control input-xlarge" ng-model="vm.acctName" placeholder="Account Name" />     
  </div>

  <div class="form-group">
      <label for="acctId" class="control-label">Account ID &nbsp;&nbsp;&nbsp;&nbsp;  </label>
      <input type="text" class="form-control input-xlarge" ng-model="vm.acctId"  placeholder="Account ID" />      
  </div>
  <div class="form-group">        
      <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</form>