删除"nav-tabs"圆角(Bootstrap)

Question

不知道如何删除Bootstrap中选项卡上的圆角(class ="nab-tabs").

示例:http://i.imgur.com/ho7rX.png

请帮忙

谢谢

Answer 1

将此行添加到CSS

.nav-tabs > li > a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

或者在你的情况下:

.nab-tabs > li > a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

编辑:21-03-2018

在BS4.0中有另一种方法添加round -0官方引导覆盖,这里是工作示例:

<div class="container">
  <div class="row">
    <div class="col-8 ml-auto mr-auto my-5 ">
      <ul class="nav nav-tabs ">
        <li class="nav-item ">
          <a class="nav-link active rounded-0" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-0" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-0" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-0 disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

浏览 CSS 文件查找任何 .nav-tabs 条目并查找：

-webkit-border-radius
 -moz-border-radius
      border-radius

将它们全部设置为 0。

编辑：

您还可以替换为主题版本，例如“扁平”、“地铁”风格版本：

http://bootswatch.com/cosmo/#buttons