Question

我试图从导航栏中删除边框和圆角。

.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>

Answer 1

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

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

Answer 2

尝试在导航类中添加.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>

Answer 3

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

你的代码很好。看看这个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>

Answer 4

试试这个

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

Answer 5

BootStrap在file:///C:/Users/myuser/AppData/Local/Temp/f2generic.otf的4px附带border-radius（注意，border-radius不适用于.navbar类）。

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

我假设导航栏包含在一个元素中，例如.navbar-default或div元素？

header

请记住，border-radius使用768px及更高版本的媒体查询启动，因此请确保将新样式包装在媒体查询中。

Answer 6

在引导程序4中，您可以通过简单地添加以下类来实现此目的：

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

Bootstrap导航栏没有边框半径？

6 个答案: