如何在引导程序中更改导航栏的边框半径？

我正在尝试更改/删除导航栏组件的边框半径。我试过这里讨论的解决方案，How to remove the "border-radius" of the navbar-inverse in Bootstrap 3?。如何在引导程序中更改导航栏的边框半径？

我在创建一个小提琴：https://jsfiddle.net/fts1b0z9/

HTML：

<!DOCTYPE html> 
{% autoescape true %} 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css"/> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class = "mainDiv"> 
    <nav class="navbar navbar-inverse" style="border-radius:none !important"> 
     <div class="container-fluid"> 
     <div class="navbar-header" style="border-radius:none !important"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
      </button> 
      <a class="navbar-brand" href="#">Website</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

    <div class="container"> 
     <h3>Collapsible Navbar</h3> 
     <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). 
     <p>Only when the button is clicked, the navigation bar will be displayed.</p> 
    </div> 
</div> 
</body> 
</html> 
{% endautoescape %}

CSS：

.navbar-header{ 
    color: #5e0231; 
    background-color: #5e0231; 
} 

.container-fluid{ 
    color: #5e0231; 
    background-color: #5e0231; 
    width:1000px; 
} 
.mainDiv{ 
    width:1000px; 
    position: fixed; 
    top: 25%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

如果你注意到，在栗色泄漏出边界。我不知道如何解决这个问题。

如果有人能帮我解决这个问题，那将会很棒。

谢谢！

来源

2016-04-25 ss7389

.navbar-inverse {border-radius：0;} –

最简单的：

.navbar-inverse { 
    border-radius: 0; 
}

不工作？或者这不是你的意思？

来源

2016-04-25 21:56:13 czachor

在引导程序声明后定义自定义样式表。

.navbar { 
    border-radius: 0; 
}

来源

2016-04-25 22:16:55

如何在引导程序中更改导航栏的边框半径？

回答

相关问题