引导导航药丸之间有额外的空白

Question

This is a simple bootstrap code I am trying, where the floated block elements have extra space between them. How do I remove it, and why is it there ?

<ul class="nav nav-pills">
  <li style="width: 40%; background: #8ac1dc;" class="active">
    <a href="#ap-about" data-toggle="tab" aria-expanded="true">About</a>
  </li>
  <li style="width: 40%; background: #ff6666">
    <a href="#ap-personal" data-toggle="tab">Account</a>
  </li>
</ul>

Jsfiddle

Answer 1

Try this:-

 <ul class="nav nav-pills">
   <li style="width: 40%; background: #8ac1dc;" class="active">
    <a href="#ap-about" data-toggle="tab" aria-expanded="true" style="border-radius: 0;">About</a>
  </li>
 <!--  -->
 <li style="width: 40%; background: #ff6666;margin:0">
  <a href="#ap-personal" data-toggle="tab" style="border-radius: 0;">Account</a>
 </li>
</ul>

Answer 2

Remove margin

CSS

.nav-pills>li+li{
    margin:0px;
}

Answer 3

Go to your bootstrap.css file on line 4093 and edit 2px to 0

.nav-pills > li + li {
  margin-left: 0;
}

Answer 4

Update the bootstrap.css margin-left from 2px to 0px 
.nav-pills > li + li {
  margin-left: 0px;
}

Answer 5

Add your custom class in ul like my-nav-pills

and add css like below

.my-nav-pills li{
    margin-left:0px;
}

it is batter to overwrite the bootstrap class and dont change the css of default bootstrap class.