bootstrap breadcrumb每个标签不显示两个项目

Question

我在选项卡中显示了一些bootstrap breadcrumb问题。我希望两个项目并排（类似于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>

编辑： 为了更加准确和清晰，我希望两个项目都在同一个标​​签中。在我的应用程序中，我将有选项卡，每个选项卡包含一个主题和一个关闭图标。我正在尝试创建一个类似于互联网浏览器标签的用户界面。

如果使用此格式无法做到这一点，我们将非常感谢您在设计此用户界面时提出的任何建议。

Answer 1

花了比预期更长的时间，但它确实有效。看看这个JSFiddle

工作原理：

Bootstrap将<li class="active">的每个孩子变成标签。您获得2个标签的原因是因为每个 <a>变成了一个标签，即使它们位于同一个<li>。

我写的CSS覆盖了这个以将<li class="active">转换为标签，而不是子项（通过变成标签，我的意思是给它边框，填充等）。

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