Question

我使用以下代码创建选项卡式界面：

<ul class="nav nav-tabs">
        <li class="active"><a href="#">Chart 1</a></li>
        <li><a href="#">Chart 2</a></li>
        <li><a href="#">Chart 3</a></li>
    </ul>

我添加后，

 <li>Chart 4</li>

在</ul>之前，CHart 4文本显示为简单文本，没有制表符边界。为什么会这样？

Answer 1

这是因为Bootstrap 3标签包含<a>的样式，没有<a>它与获取标签导航样式的条件不匹配。以下是Tabs的示例Bootstrap 3 CSS代码：

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.428571429;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
}

尝试这样Demo：

<ul class="nav nav-tabs">
        <li class="active"><a href="#">Chart 1</a></li>
        <li><a href="#">Chart 2</a></li>
        <li><a href="#">Chart 3</a></li>
      <li><a href="#">Chart 4</a></li>
    </ul>

我无法在Bootstrap选项卡中添加新的列表项

1 个答案: