Wie ändere ich den Randradius der Navbar im Bootstrap?

Ich versuche, den Umrandungsradius der Navbar-Komponente zu ändern/entfernen. Ich habe die hier besprochene Lösung How to remove the "border-radius" of the navbar-inverse in Bootstrap 3? ausprobiert.Wie ändere ich den Randradius der Navbar im Bootstrap?

Ich habe eine Geige aufgestellt: 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%); 
}

Wenn Sie bemerken, die kastanienbraune Farbe verschüttet aus der Grenze. Ich bin mir nicht sicher, wie ich das beheben soll.

Es wäre toll, wenn mir jemand helfen könnte, das zu beheben.

Danke !!

Quelle

2016-04-25 ss7389

.navbar-inverse {Grenz-Radius: 0;} –

Die einfachste:

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

funktioniert nicht? Oder ist es nicht was du meinst?

Quelle

2016-04-25 21:56:13 czachor

Definieren Sie Ihr benutzerdefiniertes Stylesheet nach der Bootstrap-Deklaration.

.navbar { 
    border-radius: 0; 
}

Quelle

2016-04-25 22:16:55

Wie ändere ich den Randradius der Navbar im Bootstrap?

Antwort

Verwandte Themen