Bootstrap 将键盘 Tab 键行为更改为水平

Question

由于引导带的设计，键盘上的 Tab 键是垂直（col wise）而不是水平的。

我可以在不改变设计的情况下使键盘 Tab 键行为水平（默认行为）

这是代码部分。

<div class="col-md-4">
    <div class="form-group col-md-12">
        <span class="col-md-6">
            <select ng-model="typeId" required=""><option value="" class="" selected="selected">--SELECT--</option>
                <option label="Employment" value="number:2">Employment</option>
                <option label="Female" value="number:3">Female</option>
                <option label="Food" value="number:4">Food</option>
                <option label="Male" value="number:1">Male</option>
            </select>
        </span>
    </div>

    <div class="form-group col-md-12" ">
        <span class="col-md-6">
             <input type="text" name="nameAr" required="" ng-maxlength="250">
        </span> 
    </div>

    <div class="form-group col-md-12">
        <span class="col-md-6">
            <select ng-model="nId" ng-options="non.nId as non.nlity for non in List" ng-invalid-required" name="nationality" id="nationality" required="">
            </select>
        </span>
    </div>

    <div class="form-group col-md-12">
    </div>
    <div class="form-group col-md-12">
        <label class="col-md-6" for="profession">Profession:</label>
            <span class="col-md-6">
                <select ng-model="rpationId" ng-options="ocp.rpationId as ocp.occupation for ocp in occupationList" >\
                </select>
            </span>
        </span>
   </div>
</div>


<div class="col-md-4">
     <div class="form-group col-md-12" ng-class="{ 'has-error' : regCtrl.userForm.mmpId.$invalid &amp;&amp; regCtrl.userForm.mmpId.$dirty }">
          <label class="col-md-6" for="mmpId">MMP Id: *</label> 
                <span class="col-md-6">
                    <input type="text" name="mmpId" class="form-control ">
                </span> 
                 <div class="col-sm-6 error-color ng-scope ng-active" >
                        <span ng-message="required" class="ng-scope">This field is required</span>
                </div>
    </div>

    <div class="form-group col-md-12" >
         <label class="col-md-6" for="name">Name: *</label> 
              <span class="col-md-6">
                    <input type="text" name="name" ng-maxlength="250">
                </span> 
    </div>

    <div class="form-group col-md-12" >
        <label class="col-md-6" for="dob">Date of Birth: *</label> 
            <span class="col-md-6">
                    <input type="date" name="dob"   ng-maxlength="11">
                        </span> 

    </div>

    <div class="form-group col-md-12" ng-class="">
         <label class="col-md-6" for="contactNo">Contact No: *</label> 
                <span class="col-md-6">
                    <input type="number" name="contactNo" required="">
                </span> 
    </div>
</div>

Answer 1

这是因为您对表单元素进行了分组。您正在按列对元素进行分组，因此选项卡按列工作。

您在第一个 col-md-4 和第二个 col-md-4 中分组了 4 个表单元素，因此默认选项卡控件将首先覆盖第一个 col-md-4 元素，然后是下一个 col-md- 4个元素。 使用 tabindex 或将布局更改为按行排列，如下所示：

<div class="row">
    <div class="col-md-4">
        <div class="form-group col-md-12">
            <input type="text" name="nameAr" required="" ng-maxlength="250">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group col-md-12">
            <input type="text" name="nameAr" required="" ng-maxlength="250">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group col-md-12">
            <input type="text" name="nameAr" required="" ng-maxlength="250">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="form-group col-md-12">
            <input type="text" name="nameAr" required="" ng-maxlength="250">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group col-md-12">
            <input type="text" name="nameAr" required="" ng-maxlength="250">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group col-md-12">
            <input type="text" name="nameAr" required="" ng-maxlength="250">
        </div>
    </div>
</div>

希望对你有帮助。