Question

我有一个奇怪的情况，我有2个Bootstrap标签。我们称他们为A＆amp; B. 案例I：如果标签A被标记为默认标签，则它应显示为：

A | B

同时A也是活动标签！

案例II：如果标签B被标记为默认标签，则它应显示为：

B |甲

同时B也是活动标签！

我已经以这样的方式配置了应用程序，用户现在可以选择默认选项卡＆amp;它显示为活动状态。但是，如何将默认选项卡显示为第一个？我们在Bootstrap中可以使用推拉的东西吗？

这是引导代码。

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
          <h2>Dynamic Tabs</h2>
          <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tabA">Tab A</a></li>
            <li><a data-toggle="tab" href="#tabB">Tab B</a></li>
          </ul>

          <div class="tab-content">
            <div id="tabA" class="tab-pane fade in active">
              <h3>Tab A</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="tabB" class="tab-pane fade">
              <h3>Tab B</h3>
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
        </div>
    </body>
</html>

现在，如果选项卡B被标记为默认值，它将从A中删除活动的类并将其添加到B.此外，还会创建一个。这部分工作正常。

但是，如何确保标签B被标记为默认标签时，它还会显示为第一个标签页？

Answer 1

我得到了它的工作。

当标签被标记为默认值时，只添加了一个类'默认'。

然后，

ul.nav-tabs {
    display: flex;
}

li.default {
    order: -1; /* the default is 0 */
}

重新排列/推送或拉动引导标签

1 个答案: