Two links in bootstrap nav-tabs menu-CodePudding

I am using Bootstrap 3.3.6

I have the following nav-tabs.

<div >
    <ul >
        <li id="343_tab" >
            <a href="javascript:">[Edit]</a>
            <a href="javascript:">Tab1</a>
        </li>
    </ul>
</div>

It looks like this

I would like it to look like this:

When I change the li to inline-flex, it looks like two separate tabs. No effect on any other display options.

CodePudding user response：

You need to wrap the <a> elements inside the <li> element.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div >
    <ul >
        <li ><a href="javascript:">[Edit]</a></li>
        <li><a href="javascript:">Tab1</a></li>
    </ul>
</div>

CodePudding user response：

Try

.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 >
    <ul >
        <li ><a href="javascript:">[Edit]</a></li>
        <li><a href="#">Tab1</a></li>
    </ul>
</div>
</body>