css - tabla - ¿Cómo eliminar las esquinas redondeadas de la barra de navegación usando la propiedad border-radius cuando se usa SASS para Ruby on Rails?

compile sass to css command line

Question

Soy nuevo en la programación y aprendizaje de bootstrap a través de un curso llamado One Month Rails. Quiero eliminar las esquinas redondeadas en la barra de navegación inversa, pero estoy teniendo un momento difícil. He revisado ambos subprocesos de stackoverflow en los enlaces a continuación, pero sigo teniendo problemas.

Actualmente tengo un archivo llamado "Bootstrap_and_customization.css.scss" y tiene el siguiente código:

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

Sin embargo, el radio del borde sigue siendo redondeado. Espero haber proporcionado suficiente información, pero es posible que no la tenga, por favor háganmelo saber.

Gracias

===== Enlaces:

Deshacerse de todas las esquinas redondeadas en Twitter Bootstrap

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

Answer 1

Debe cambiar el siguiente bloque de arranque:

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

Simplemente comente la propiedad border-radius.

Answer 2

En la barra de navegación de tu clase, debes anular el radio del borde a 0px:

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

Dado que el html tiene prioridad sobre el CSS, anulará el estilo sin interferir con el código.

Por otro lado, podría anular todo el "radio de borde" que precede a "barra de navegación" en "css / bootstrap.css"

Nota: para el color del borde que utilicé: "border-color: transparent;"

Answer 3

En lugar de modificar el css agregaré la clase: navbar-static-top

es decir:

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

o la clase navbar-fixed-top, si quieres que el menú se fije en la parte superior (en páginas grandes)

es decir:

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

Answer 4

Espero que esto te ayude. Esto funcionó para mí.

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

<!-- Content -->

</nav>

Answer 5

Esta también es una variable que se puede generar y descargar o cambiar si usa LESS / SCSS

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

Answer 6

Este link tiene una pregunta similar y fue respondida perfectamente.

Bootstrap CSS puede ser enorme y estar comprimido. Puede hacer ''inspeccionar elemento'' para encontrar la ubicación del archivo en el que está presente la propiedad CSS, y luego modificar los parámetros allí.

O

Puede escribir algunos CSS internos, es decir, en el archivo de vista o en el diseño de la aplicación (si lo desea para todas las vistas).

En la cabecera del archivo respectivo, escriba lo siguiente:

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

Si el código anterior no funciona, deberá especificar la clase del div o elemento para el que desea tener bordes angulares. En la cabecera del archivo respectivo, escriba lo siguiente:

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

Nota: Reemplace ''clase'' por una válida.

Answer 7

Solo agrega la clase .navbar-full como esta.

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

No sé si esto funciona para bootstrap 3, pero puedes intentarlo.

Answer 8

Todo lo que ha hecho allí es crear una variable inicializada en 0. Creo que es mejor que deje que Bootstrap haga lo que quiere y luego anule lo que quiera.

Intenta aplicar

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

Y, por supuesto, asegúrese de que este estilo (y cualquier otro estilo predominante) esté incluido en sus archivos de plantilla.

Answer 9

Usaste:

<nav class="navbar navbar-inverse">

Intenta usar esto en su lugar:

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

y esto eliminará el radio

Answer 10

busque el .navbar-inverse y solo agregue {border-radius:0px;} como este .navbar-inverse {border-radius:0px;}

Answer 11

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

Proporcione estos códigos antes o después de las etiquetas para que esto anule la propiedad predeterminada. Espero que esto lo ayude. Esto funcionó para mí.

Answer 12

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

aplique el estilo directamente en el mismo elemento que contiene la barra de navegación. ! important eliminará el estilo de bootstrap y hará que su stype sea más importante.