问题:

I'm trying to remove the border and round corner from the nav-bar.

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

But it does not work, any ideas?

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>

回答1:

".navbar-default" is not cause. To remove the border and round corner from the nav-bar, You should try it:

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

回答2:

Try adding .navbar-static-top in your nav class

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

回答3:

This is usually when ur css is loaded before bootstrap css and is getting overwritten. Make sure ur css is defined after bootstrap.

Your code is fine. Have a look at this 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:

Try this

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

回答5:

BootStrap ships with a border-radius on .navbar of 4px (note, the border-radius is not applied to .navbar-default class).

To overcome this, firstly make sure your custom CSS file is loaded AFTER BootStrap's, and then simply use a parent / child selector to be more specific...

I assume the nav bar is wrapped in an element, such as a div or header element?

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

Bear in mind that the border-radius kicks in with a media query from 768px and upwards, so ensure to wrap your new style in a media query.

转载请标明出处:Bootstrap navbar no border radius?

文章来源: Bootstrap navbar no border radius?

标签

border-radius

border