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
Remove "nav-tabs" rounded corners (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:
您还可以替换为主题版本,例如“平面”、“地铁”风格版本:

