Question

这是我正在尝试的简单引导代码，其中浮动块元素在它们之间有额外的空间。如何删除它，为什么会删除它？

<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

试试这个： -

 <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

删除保证金

<强> CSS

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

Answer 3

转到bootstrap.css行的4093文件，然后将2px编辑为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

将您的自定义类添加到ul my-nav-pills

中

并添加如下的css

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

覆盖bootstrap类并且不要更改默认引导类的css是打击。

Bootstrap导航药丸之间有额外的空白区域

5 个答案: