为什么我编辑表单长度的位置阻止我在表单中输入信息？

Question

我有一个包含多个垂直表单域的表单。我想把它编辑成一系列水平和垂直的表单域。根据bootstrap API (http://getbootstrap.com/css/#forms-control-sizes)，您可以创建一个类似于col xs-4的类来编辑表单字段的长度，如果您选择这样做，那么表单也可以水平间隔。当我尝试水平间隔某些字段时，我无法在字段中键入内容。我尝试使用CSS Z-index将它们提升到顶部，但似乎不起作用。

我的代码使用了两个垂直输入字段：

​

    .form{
      z-index: 12;
    }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <form id="questions" class="form col-xs-4" name="form" ng-submit="signUp()" novalidate>
    
    
                <div class="form-group" ng-class="{ 'has-success': form.total.$valid && submitted,
                                                    'has-error': form.total.$invalid && submitted }">
                    <label>Business Name</label>
    
                    <input type="text" name="total" class="form-control" ng-model="user.businessname"
                           required/>
                </div>
            
    
                <div class="form-group" ng-class="{ 'has-success': form.total.$valid && submitted,
                                                    'has-error': form.total.$invalid && submitted }">
                    <label>Email</label>
    
                    <input type="text" name="total" class="form-control" ng-model="user.email"
                       required/>
                </div>
          </form>
      </div>

​

我的代码中有两个水平输入字段，它们看起来是正确的，但我无法在其中键入内容；您可以看到我的CSS，其中包含Z-index：

​

.form{
      z-index: 12;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="container">
    <form id="questions" class="form" name="form" ng-submit="signUp()" novalidate>

         <div class=  "col-xs-4">
            <div class="form-group" ng-class="{ 'has-success': form.total.$valid && submitted,
                                                'has-error': form.total.$invalid && submitted }">
                <label>Business Name</label>

                <input type="text" name="total" class="form-control" ng-model="user.businessname"
                       required/>
            </div>
        </div>

        <div class=  "col-xs-4">
            <div class="form-group" ng-class="{ 'has-success': form.total.$valid && submitted,
                                                'has-error': form.total.$invalid && submitted }">
                <label>Email</label>

                <input type="text" name="total" class="form-control" ng-model="user.email"
                   required/>
            </div>
         </div>
    </form>
</div>

​

注意:尝试使用.form和.form-group...

Answer 1

Bootstrap是非常特殊的，所以

将产生上面提到的错误。