Html 如何在引导导航选项卡之间设置分隔符/分隔符

我通过引导定义了一些选项卡，如下所示：

<ul class="nav nav-tabs">
    <li>
        <a href="#panel-myRules" data-toggle="tab">My Rules</a>
    </li>
    <li class="active">
        <a href="#panel-activeRules" data-toggle="tab">Active Rules</a>
    </li>
    <li>
        <a href="#panel-inactiveRules" data-toggle="tab">Inactive Rules</a>
    </li>
</ul>

我想在第二个和第三个选项卡之间留出一些空间，或者在它们之间有一个分隔符。引导的

分隔器

类不适用于定义为

导航选项卡

的选项卡

知道怎么做吗？

我会使用CSS规则：

.nav-tabs li:nth-child(2) {margin-right: 10px;}

或：

---

如果我能很好地理解以下内容，我想你会想要它：

CSS:

HTML:

表1
表2
表3

---

注意：我使用了bootstrap v3.3.1

您可以在该选项卡上使用ID吗？或者，选项卡是否始终处于相同的位置？一个简单的CSS规则就可以了。

#myTabId {...}

    .nav.nav-tabs > li.active a {
        border: 0;
    }
    .nav.nav-tabs li:not(:last-child) a {
        border-right: 1px solid #ccc;
        border-radius: 0;    
    }
.nav.nav-tabs li a {
  border-radius: 0; /* avoid curved divisor corner */
}

<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#panel-myRules" aria-controls="home" role="tab" data-toggle="tab">My Rules</a>
        </li>
        <li role="presentation"><a href="#panel-activeRules" aria-controls="profile" role="tab" data-toggle="tab">Active Rules</a>
        </li>
        <li role="presentation"><a href="#panel-inactiveRules" aria-controls="messages" role="tab" data-toggle="tab">Inactive Rules</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="panel-myRules">Tab 1</div>
        <div role="tabpanel" class="tab-pane" id="panel-activeRules">Tab 2</div>
        <div role="tabpanel" class="tab-pane" id="panel-inactiveRules">Tab 3</div>
    </div>
</div>