1

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

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

非常感谢提前，

4

2 回答 2

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++;
  }
});
于 2013-11-08T23:14:11.507 回答
0

我所做的就是这样做

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

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

于 2017-03-15T19:10:49.833 回答