HTML輸入字段tabindex問題

Question

我使用Bootstrap創建HTML表單，並且輸入字段索引有問題。

這些字段在桌面上並排顯示（單行中的2個字段）。現在，當按下標籤時，光標會移到第二行的第一個字段，這是我不需要的。所以我通過使用tabindex

解決了這個問題。移動設備上出現了另一個問題，因爲輸入字段在移動設備上（每行一個字段）逐個顯示。當我們按下從第一場片它進入第三場，這看起來非常奇怪，我想解決它......

這裏是活生生的實例：

桌面：

.col-md-6{ 
 
width: 50%; 
 
float:left; 
 
}

<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 1</span> 
 
    <input type="text" id="field1" tabindex="1"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 3</span> 
 
    <input type="text" id="field3" tabindex="3"/> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 2</span> 
 
    <input type="text" id="field2" tabindex="2"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 4</span> 
 
    <input type="text" id="field4" tabindex="4"/> 
 
    </div> 
 
    
 
</div>

手機：

<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 1</span> 
 
    <input type="text" id="field1" tabindex="1"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 3</span> 
 
    <input type="text" id="field3" tabindex="3"/> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-6"> 
 

 
    <div class="form-group"> 
 
    <span>Field 2</span> 
 
    <input type="text" id="field2" tabindex="2"/> 
 
    </div> 
 
    <div class="form-group"> 
 
    <span>Field 4</span> 
 
    <input type="text" id="field4" tabindex="4"/> 
 
    </div> 
 
    
 
</div>

我怎樣才能解決這個問題？

Answer 1

嘗試包裝你cols在rows codepen