引导导航选项卡菜单中的两个链接答案

【问题标题】：Two links in bootstrap nav-tabs menu引导导航选项卡菜单中的两个链接
【发布时间】：2022-02-17 21:04:22
【问题描述】：

我正在使用 Bootstrap 3.3.6

我有以下导航标签。

<div class="my-panel">
    <ul class="nav nav-tabs">
        <li id="343_tab" class="active">
            <a href="javascript:">[Edit]</a>
            <a href="javascript:">Tab1</a>
        </li>
    </ul>
</div>

看起来像这样

我希望它看起来像这样：

当我将 li 更改为 inline-flex 时，它看起来像两个单独的选项卡。对任何其他显示选项没有影响。

【问题讨论】：

是否有某些原因将多个锚点放在一个列表项中？这不是 Bootstrap 文档推荐的。

标签： html css twitter-bootstrap-3

【解决方案1】：

试试

.nav-tabs {
  border: 1px solid #ddd;
  border-bottom: none !important;
  border-radius: 4px;
  border-bottom-right-radius: 0px;
  display: inline-block;
}

.nav-tabs a {
  border: none !important;
  margin-right: 0 !important;
  text-decoration: underline;
  font-weight: 500;
  text-decoration-thickness: 2px;
}

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

<div class="my-panel">
    <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:">[Edit]</a></li>
        <li><a href="#">Tab1</a></li>
    </ul>
</div>
</body>

【讨论】：

【解决方案2】：

这最终对我有用 - 很简单。

<li class="active">
   <div>
      <a href="javascript:"><i class="fa fa-pencil" aria-hidden="true"></i></a>
      <a href="javascript:"><i class="fa fa-trash" aria-hidden="true"></i></a>
      <a href="javascript:">Tab title</a>
   </div>
</li>

【讨论】：