Wie entferne ich abgerundete Ecken der Navbar mit der Eigenschaft "border-radius" bei Verwendung von SASS für Ruby on Rails?

Anstatt die CSS zu ändern, füge ich die Klasse hinzu: navbar-static-top

dh: 

<nav class="navbar navbar-default navbar-static-top" role="navigation">

oder die Klasse navbar-fixed-top, wenn das Menü oben (auf großen Seiten) fixiert werden soll

dh: 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

Du hast benutzt: 

<nav class="navbar navbar-inverse">

Versuchen Sie es stattdessen: 

<nav class="navbar navbar-inverse navbar-static-top"> 

und dies wird den Radius entfernen

Alles, was Sie dort getan haben, ist das Erstellen einer auf 0 initialisierten Variablen. Ich denke, Sie lassen Bootstrap am besten tun, was es will, und überschreiben dann das, was Sie wollen.

Bewerben Sie sich 

* {
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

Stellen Sie sicher, dass dieser Stil (und alle anderen überschreibenden Stile) in Ihren Vorlagendateien enthalten ist.

In der Navigationsleiste Ihrer Klasse müssen Sie den Grenzradius auf 0px überschreiben:

<nav class="navbar navbar-inverse" style="border-radius:0px;">

Da der HTML-Code Vorrang vor dem CSS hat, überschreiben Sie den Stil, ohne den Code zu beeinträchtigen.

In der anderen Hand können Sie den gesamten "Grenzradius" vor .__ "navbar" in der "css/bootstrap.css" überschreiben

Hinweis: für die Randfarbe habe ich verwendet: "Randfarbe: transparent;"

Hoffe, das hilft dir. Das hat für mich funktioniert.

<nav class="navbar navbar-inverse navbar-static-top" >

<!-- Content -->

</nav>

Fügen Sie einfach die Klasse .navbar-full so hinzu.

<nav class="navbar navbar-dark bg-inverse navbar-full" id="nav-main">

Ich weiß nicht, ob dies für Bootstrap 3 funktioniert, aber Sie können es versuchen.

Dies ist auch eine Variable, die mit LESS/SCSS erstellt und heruntergeladen oder geändert werden kann

$navbar-border-radius: $border-radius-base !default;

Dieser Link hat eine ähnliche Frage und wurde perfekt beantwortet.

Bootstrap-CSS kann sehr umfangreich und komprimiert sein. Sie können mit dem Element "inspect element" den Speicherort der Datei ermitteln, in der sich die CSS-Eigenschaft befindet, und dann die Parameter dort ändern.

ODER 

Sie können internes CSS schreiben, d. H. In die Ansichtsdatei oder in das Anwendungslayout (wenn Sie alle Ansichten anzeigen möchten).

Schreiben Sie im Kopf der jeweiligen Datei Folgendes:

<style>
body {
background-color: #95a5a6;
border-radius: 0px;
}
</style>

Wenn der obige Code nicht funktioniert, müssen Sie die Klasse des Divs oder Elements angeben, für das Winkelbegrenzungen angezeigt werden sollen .. _ Geben Sie im Kopf der jeweiligen Datei Folgendes ein:

<style>
.class {
background-color: #95a5a6;
border-radius: 0px;
}
</style>

Hinweis: Ersetzen Sie "Klasse" durch eine gültige.

Sie sollten den folgenden Bootstrap-Block ändern:

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

Kommentieren Sie einfach die Eigenschaft "border-radius".

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

wenden Sie den Stil direkt auf das gleiche Element an, das die Navigationsleiste enthält. ! important entfernt den Style von bootstrap und macht Ihren stype wichtiger.

<style>
.navbar{
border-radius:0px;
}
</style>

Stellen Sie diese Codes vor oder nach den Tags bereit, so dass die Standardeigenschaft überschrieben wird.

suchen Sie nach dem .navbar-inverse und fügen Sie {border-radius:0px;} nur so hinzu .navbar-inverse {border-radius:0px;}