Bootstrap导航栏没有边界半径？答案

【问题标题】：Bootstrap navbar no border radius?Bootstrap导航栏没有边界半径？
【发布时间】：2016-05-28 20:07:48
【问题描述】：

我正在尝试从导航栏中删除边框和圆角。

.navbar-default {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

但它不起作用，有什么想法吗？

HTML，

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

【问题讨论】：

仔细检查您的 CSS，在您的导航类 html 中显示“navbar navbar-default”，而在您的 css 中您只指定 .navbar-default。
另外，你可以设置border:none;
没有border-radius。 jsfiddle.net/12fckdt5

标签： css twitter-bootstrap-3 navbar

【解决方案1】：

尝试在导航类中添加 .navbar-static-top

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
<nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

【讨论】：

另一个很好的答案。谢谢。

【解决方案2】：

".navbar-default" 不是原因。要从导航栏中删除边框和圆角，您应该尝试一下：

.navbar {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

【讨论】：

【解决方案3】：

这通常是在引导 css 之前加载你的 css 并被覆盖时。确保你的 css 是在 bootstrap 之后定义的。

您的代码很好。看看这个 JSFiddle。

https://jsfiddle.net/0h8muuc3/2/

.navbar-default{
  border: none;
  border-radius: 0;
}

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>

【讨论】：

【解决方案4】：

试试这个

.navbar-default {border-radius:0 !important;}

【讨论】：

【解决方案5】：

BootStrap 在 .navbar 上附带一个 4px 的 border-radius（注意，边框半径不适用于 .navbar-default 类）。

要克服这个问题，首先确保您的自定义 CSS 文件在 BootStrap 之后加载，然后简单地使用父/子选择器来更具体...

我假设导航栏被包裹在一个元素中，例如 div 或 header 元素？

@media (min-width: 768px) {
    header .navbar {
        border-radius: 0;
    }
}

请记住，边界半径会在 768 像素及以上的媒体查询中生效，因此请确保将您的新样式包含在媒体查询中。

【讨论】：

你的解释很到位。但是即使在使用了上面的 sn-p 并确保我的自定义 css 加载后 boostrap css（我使用的是 3.7.7）之后，这对我也不起作用。如何摆脱 786px 及以上的 4px 边框？？

【解决方案6】：

在 bootstrap 4 中，您只需添加以下类即可实现此目的：

<nav class="rounded-0"></nav>

【讨论】：