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>

我想在第二个和第三个标签之间放置一些空格或者在它们之间有一个分隔符。 Bootstraps的divider类不适用于定义为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>

注意：我使用了bootstrap v3.3.1

如何在bootstrap nav-tabs之间有一个分隔符/分隔符

2 个答案: