Question

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

我读到了tabindex。但我想知道我是否可以做更自动的事情...我的意思是，我想渲染HTML，以便默认的Tab键顺序是我想要的。这意味着我应首先渲染左列，然后再渲染第二列。也许是一些CSS魔术，以便第二列不低于第一列，但在右边......任何想法是否可能或如何？

提前多多感谢，

Answer 1

您正在寻找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++;
  }
});

Answer 2

我做的是做这个

<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>

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

多列网格中的Bootstrap垂直标签

2 个答案: