it-swarm.com.de

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

Ich bin neu im Programmieren und Lernen von Bootstrap durch einen Kurs namens One Month Rails. Ich möchte die abgerundeten Ecken der inversen Navbar entfernen, habe aber Schwierigkeiten. Ich habe die beiden Stackoverflow-Threads in den Links unten durchgesehen, habe aber immer noch Probleme. 

Momentan habe ich eine Datei namens "Bootstrap_and_customization.css.scss" mit folgendem Code:

$body-bg:   #95a5a6;
$border-radius: 0px;
@import 'bootstrap';

Der Randradius ist jedoch immer noch gerundet. Ich hoffe, ich habe genug Informationen zur Verfügung gestellt, aber ich habe es vielleicht nicht, also lass es mich wissen. 

Vielen Dank

===== Links:

Alle abgerundeten Ecken in Twitter Bootstrap loswerden

https://stackoverflow.com/questions/20926522/flat-ui-round-corners-css-html

39
Faique Moqeet

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">
88
Manza

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

25

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.

15
Vidya

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;"

7
Theo Leinad

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

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

<!-- Content -->

</nav>
5
krekto

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.

4
Yordan Ramchev

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

$navbar-border-radius: $border-radius-base !default;
2
Ian Warner

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.

2
Tom Hagen

Sie sollten den folgenden Bootstrap-Block ändern:

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

Kommentieren Sie einfach die Eigenschaft "border-radius".

2
Pablo
.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.

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

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

1
Sreelakshmi

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

0
Shahid Hussain