如何在 bootstrap 导航标签之间设置 separator/divider

Question

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

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

我想在第 2 个和第 3 个选项卡之间放置一些 space 或在它们之间添加分隔符。 Bootstraps 的 divider class 不适用于定义为 nav-tabs.

的选项卡

知道怎么做吗？

Answer 1

我会使用 CSS 规则：

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

Demo

或者：

#myTabId {...}

Demo

Answer 2

如果我理解得很好，我想你会想要它：

http://jsfiddle.net/0Lwe9yaq/3/

CSS:

    .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 */
}

HTML:

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

注意：我用的是bootstrapv3.3.1

如何在 bootstrap 导航标签之间设置 separator/divider

How to have have a separator/divider between bootstrap nav-tabs

html

css

twitter-bootstrap

twitter-bootstrap-3