bootstrap 面包屑未在每个选项卡上显示两个项目

Question

我遇到了一些问题 bootstrap 选项卡中显示面包屑。我想并排显示这两个项目（类似于 chrome 中的选项卡）。但是，无法正确执行此操作。有什么建议吗？

<ol class="breadcrumb">
    <ul class="nav nav-tabs">
        <li class="active">
          <a href="/zika">Zika Virus</a>
          <a href="#"><i class="fa fa-close"></i></a>
        </li>
    </ul>
</ol>

编辑：更准确和清楚地说，我希望这两个项目都在同一个选项卡中。在我的应用程序中，我将有选项卡，每个选项卡包含一个主题和一个关闭图标。我正在尝试创建一个类似于 Internet 浏览器选项卡的 UI。

如果此格式无法做到这一点，我们将不胜感激任何设计此 UI 的建议。

Answer 1

它比我预期的要长得多，但它有效。看看这个 JSFiddle

工作原理：

Bootstrap 将 <li class="active"> 中的每个 child 变成制表符。你得到 2 个标签的原因是 each <a> 变成了一个标签，即使它们在同一个 <li>.

我写的 CSS 覆盖它以将 <li class="active"> 变成选项卡，而不是 children （通过变成选项卡，我的意思是给它边框，填充等）

.nav-tabs li {
  /* Give Bootstrap CSS normally applied to children
               to the tab container */
  color: #555 !important;
  cursor: default !important;
  background-color: #FFF !important;
  border: 1px solid #DDD !important;
  border-bottom-color: transparent !important;
  margin-right: 2px !important;
  line-height: 1.42857143 !important;
  border-radius: 4px 4px 0 0 !important;
  position: relative !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
  list-style: none !important;
}
.nav-tabs li * {
  /* Overwrite Bootstrap CSS */
  border: none !important;
  margin-right: 0 !important;
  padding: 0 !important;
  /* To display on the same line */
  display: inline-block !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<ol class="breadcrumb">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#">Zika Virus</a>
      <a class="custom-inline" href="#"><i class="fa fa-close">   X</i></a>
    </li>
  </ul>
</ol>

bootstrap 面包屑未在每个选项卡上显示两个项目

bootstrap breadcrumb not showing two items per tab

html

css

breadcrumbs

html-lists

twitter-bootstrap-3