Html 多列网格中的Bootstrap垂直选项卡

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

我读到了关于tabindex。但是我想知道我是否可以做一些更自动化的事情…我的意思是，我想呈现HTML，这样默认的选项卡顺序就是我想要的。这意味着我应该先渲染左列，然后渲染第二列。也许还有一些CSS魔法，这样第二列就不会在第一列的下面，而是在右边。。。你知道这是否可能或如何实现吗

---

提前非常感谢，

您正在查找的

tabindex

您可以对元素设置选项卡索引，如下所示：

<input type="text" tabindex="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>

标号输出
标号输出
标号输出
标号输出

---

这让我可以使用引导网格在两列之间垂直切换

嘿，我只是想提醒你回顾一下之前的问题，如果答案回答了你的问题，就把答案标记为已接受。这可以通过点击问题左侧的

复选标记来完成。将第一列中所有输入的tabindex设置为1，然后将第二列的tabindex设置为2，依此类推。如果您不想在标记中这样做，您可以编写一个简单的jquery脚本。有趣的是，我有同样的问题，但恰恰相反。我想停止网格中的垂直选项卡并使其水平。可惜我们没有同时遇到这个问题！谢谢是的，我读过。但是我想知道我是否可以做一些更自动化的事情…我的意思是，我想呈现HTML，这样默认的选项卡顺序就是我想要的。这意味着我应该先渲染左列，然后渲染第二列。也许还有一些CSS魔法，使第二列不在第一列的下方，而是在右边…@Marianomatinezpeck对此不确定。。不过，您可以使用jQuery为所有输入元素设置选项卡索引。谢谢。这实际上解决了我的问题。我所做的是，我在一个div中用某个ID包围了每个左部分，用另一个ID包围了每个右部分。然后用一个类似于您的脚本，我从1开始，只为div#leftColumn输入那些内容。然后我也做了同样的操作，但从100开始，然后输入div#right列。谢谢
<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>