Bootstrap navbar without borders?

Question

I am trying to remove a border and a round corner from the navigation bar.

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

But it doesn’t 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>

Answer 1

" .navbar-defaul t" is not the cause. To remove the border and round corner from the navigation bar, you should try:

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

Answer 2

Try adding .navbar-static-top to your navigation 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>

Run codeHide result

Answer 3

, ur css 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 border-radius .navbar 4px ( , .navbar-default).

, , CSS BootStrap, parent/child, ...

, , div header?

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

, - 768px , , .