Question

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

创建了一个小提琴

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%);
}

如果您注意到，栗色会溢出边框。我不知道如何解决这个问题。

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

谢谢！

Answer 1

最简单的：

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

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

Answer 2

在bootstrap声明后定义自定义样式表。

.navbar {
    border-radius: 0;
}

如何在bootstrap中更改导航栏的边框半径？

2 个答案: