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>

如何使Bootstrap表单字段水平

2 个答案: