如何获得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>

Answer 2

这似乎是无效的使用类。试试以下代码：

<form class="form-inline"> 
    <fieldset> 
     <div class="form-group"> 
      <label for="acctName" class="col-lg-2 control-label">Account Name</label> 
      <div class="col-lg-10"> 
       <input type="text" class="form-control input-xlarge" id="acctName" ng-model="vm.acctName" placeholder="Account Name" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="acctId" class="col-lg-2 control-label">Account ID</label> 
      <div class="col-lg-10"> 
       <input type="text" class="form-control input-xlarge" id="acctId" ng-model="vm.acctName" placeholder="Account ID" /> 
      </div> 
     </div> 
    </fieldset> 
</form>