twitter-bootstrap 删除“导航标签”圆角(引导程序)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14145669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:02:49  来源:igfitidea点击:

Remove "nav-tabs" rounded corners (Bootstrap)

twitter-bootstrap

提问by user1946565

Don't know how to remove the rounded corner on tabs (class="nab-tabs") in Bootstrap.

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

Example: http://i.imgur.com/ho7rX.png

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

Please Help

请帮忙

Thanks

谢谢

回答by Ignacio Correia

Add this line to the CSS

将此行添加到 CSS

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

or in your case:

或者在你的情况下:

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

EDIT: 21-03-2018

编辑:21-03-2018

there is another way in BS4.0 add rounded-0the official bootstrap override, here is the working example:

在 BS4.0 中有另一种方法添加rounded-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>

回答by Archonic

For Bootstrap 4 you can use .nav-tabs-nostyle. For example:

对于 Bootstrap 4,您可以使用.nav-tabs-nostyle. 例如:

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <div class="nav navbar-nav nav-tabs-nostyle">
    <a href="#one" class="nav-item nav-link" data-toggle="tab">One</a>
    <a href="#two" class="nav-item nav-link" data-toggle="tab">Two</a>
    <a href="#three" class="nav-item nav-link" data-toggle="tab">Three</a>
  </div>
</nav>

回答by Ibraheem

Go through the CSS file looking for any .nav-tabs entries and look for:

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

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

Set them all to 0.

将它们全部设置为 0。

EDIT:

编辑:

You could also replace with a themed version such as this "flat", "metro" style version:

您还可以替换为主题版本,例如“平面”、“地铁”风格版本:

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

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