web-dev-qa-db-fra.com

Comment supprimer les coins arrondis de la barre de navigation à l'aide de la propriété border-radius lors de l'utilisation de SASS pour Ruby on Rails?

Je suis novice en programmation et en apprentissage grâce à un cours appelé One Month Rails. Je veux supprimer les coins arrondis de l'inverse-navbar mais je passe un moment difficile. J'ai regardé à travers les deux threads stackoverflow dans les liens ci-dessous, mais j'ai toujours des problèmes. 

Actuellement, j'ai un fichier appelé "Bootstrap_and_customization.css.scss" et il a le code suivant:

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

Cependant, le rayon de la frontière est toujours arrondi. J'espère avoir fourni suffisamment d'informations, mais je ne l'aurais peut-être pas alors merci de me le faire savoir. 

Merci

===== Liens:

Se débarrasser de tous les angles arrondis de Twitter Bootstrap

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

cssruby-on-railsrubytwitter-bootstrap
39
Faique Moqeet

Je vais au lieu de modifier le css ajouter la classe: navbar-static-top

c'est à dire: 

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

ou la classe navbar-fixed-top, si vous souhaitez que le menu soit fixé en haut (sur les grandes pages)

c'est à dire: 

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

Vous avez utilisé: 

<nav class="navbar navbar-inverse">

Essayez d'utiliser ceci à la place: 

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

et cela supprimera le rayon

25
Haroon Patel - PK

Tout ce que vous avez fait est de créer une variable initialisée à 0. Je pense que vous feriez mieux de laisser Bootstrap faire ce qu’il veut et d’ignorer ce que vous voulez.

Essayez de postuler 

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

Et bien sûr, assurez-vous que ce style (et tous les autres styles prioritaires) est inclus dans vos fichiers de modèle.

15
Vidya

Sur votre barre de navigation de classe, vous devez remplacer le paramètre border-radius par 0px:

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

Étant donné que le code HTML est prioritaire sur le CSS, vous redéfinirez le style sans manipuler le code.

D'autre part, vous pouvez remplacer tout le "border-radius" qui précède "Navbar" dans le "css/bootstrap.css"

Remarque: pour la couleur de bordure, j'ai utilisé: "border-color: transparent;"

7
Theo Leinad

J'espère que cela vous aide. Cela a fonctionné pour moi.

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

<!-- Content -->

</nav>
5
krekto

Ajoutez simplement la classe .navbar-full comme ceci.

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

Je ne sais pas si cela fonctionne pour bootstrap 3, mais vous pouvez l'essayer.

4
Yordan Ramchev

C’est aussi une variable qui peut être générée et téléchargée ou modifiée si vous utilisez LESS/SCSS

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

This link a une question similaire et a reçu une réponse parfaite.

Bootstrap CSS peut être énorme et compressé. Vous pouvez faire 'inspecter un élément' pour trouver l'emplacement du fichier dans lequel la propriété CSS est présente, puis modifier les paramètres par là.

OU 

Vous pouvez écrire des CSS internes, c'est-à-dire dans le fichier de vue ou la présentation de l'application (si vous le souhaitez pour toutes les vues).

Dans l'en-tête du fichier respectif, écrivez ce qui suit:

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

Si le code ci-dessus ne fonctionne pas, vous devrez spécifier la classe de l'élément div ou de l'élément pour lequel vous souhaitez définir des bordures d'angle .

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

Remarque: remplacez 'classe' par un autre valide.

2
Tom Hagen

Vous devriez changer le bloc d'amorçage suivant:

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

Il suffit de commenter la propriété border-radius.

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

appliquer le style directement sur le même élément qui contient la barre de navigation. ! important va supprimer le style de bootstrap et rendre votre stype plus important.

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

Fournissez ces codes avant ou après les balises pour que cela remplace la propriété par défaut. J'espère que cela vous aidera.

1
Sreelakshmi

cherchez le .navbar-inverse et ajoutez seulement {border-radius:0px;} comme ceci .navbar-inverse {border-radius:0px;}

0
Shahid Hussain