多列网格中的引导垂直制表符

Question

我有一个使用 Twitter Bootstrap 3 网格系统的两列表单。每列由一个标签和一个控件组成。所以实际上，每个“行”是 span3 的 4 列（一个标签、一个控件、一个标签、一个控件）。这很好用，但我有一个问题，当我制表符时，它会从左到右水平制表符。但是我想垂直滚动，这意味着一个标签会一直向下直到该列完成，然后是第二列......

我读到了tabindex。但我想知道我是否可以做一些更自动化的事情......我的意思是，我想渲染 HTML，以便默认的 tab 顺序是我想要的。这意味着我应该先渲染左列，然后再渲染第二列。也许还有一些 CSS 魔法，所以第二列不在第一列之下，而是在右边……知道这是否可能或如何实现？

非常感谢，

Answer 1

我所做的就是这样做

<div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="row">LABEL</div><div class="col-sm-12 col-md-6">INPUT</div>
     <div class="col-sm-12 col-md-6">
    </row>
    <div class="row">LABEL</div><div class="col-sm-12 col-md-6">INPUT</div>
     <div class="col-sm-12 col-md-6">
    </row>
  </div>
  <div class="col-sm-12 col-md-6">
    <div class="row">LABEL</div><div class="col-sm-12 col-md-6">INPUT</div>
     <div class="col-sm-12 col-md-6">
    </row>
    <div class="row">LABEL</div><div class="col-sm-12 col-md-6">INPUT</div>
     <div class="col-sm-12 col-md-6">
    </row>
  </div>
</div>

这让我使用引导网格在两列之间进行垂直制表。

Answer 2

您正在寻找tabindex，您可以在您的元素上设置标签索引，如下所示：

<input type="text" tabindex="2" />

因此您需要调整元素的标签索引，以便第一列具有tabindex="1"、tabindex="2" 等。

jQuery -（您可能需要调整函数，以便它正确处理您的 bootstrap 列。）

var tabindex = 1;
$('input,select').each(function() {
  if (this.type != "hidden") {
    var $input = $(this);
    $input.attr("tabindex", tabindex);
    tabindex++;
  }
});