HTML输入字段tabindex问题

Question

我使用Bootstrap创建HTML表单，输入字段索引有问题。

字段在桌面上并排显示（单行中的2个字段）。现在当按下选项卡时，光标将转到第2行第一个字段，这是我不想要的。所以我使用$entities = Entity::pluck('ical', 'id'); foreach ( $entities as $entityID => $entityIcal ) { $response = Curl::to($entityIcal); foreach ($response as $test) { >download('public/ical/'.$entityID.'.ics'); $this->info("ICal Retrieved"); } }

解决了这个问题

另一个问题出现在移动设备上，因为输入字段在移动设备上逐个显示（每行1个字段）。当我们从第一个字段按Tab键时，它会转到第三个字段，这看起来很奇怪，我想修复它...

以下是实例：

桌面：

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>

如何解决此问题？

Answer 1

尝试将cols包裹在rows中 codepen