obteniendo application.css para anular bootstrap

Estoy intentando personalizar la barra de navegación de mi aplicación Rails y he agregado el css a application.css. Sé que se hace referencia correctamente a application.css, porque la aplicación está recogiendo otro estilo de él. Pero la barra de navegación css está intentando anular lo que ya está en bootstrap.css, y la aplicación no lo está reconociendo …

application.html.erb (diseño)

 "all" %>    

aplicacion.css

 body { padding-top: 20px; padding-bottom: 60px; } /* Custom container */ .container { margin: 0 auto; max-width: 1000px; } .container > hr { margin: 0px 0; } /* Main marketing message and sign up button */ .jumbotron { margin: 20px 0; text-align: center; } .jumbotron h1 { font-size: 100px; line-height: 1; } .jumbotron .lead { font-size: 24px; line-height: 1.25; } .jumbotron .btn { font-size: 21px; padding: 14px 24px; } /* Supporting marketing content */ .marketing { margin: 60px 0; } .marketing p + h4 { margin-top: 28px; } /* Customize the navbar links to be fill the entire space of the .navbar */ .navbar .navbar-inner { padding: 0; } .navbar .nav { margin: 0; display: table; width: 100%; } .navbar .nav li { display: table-cell; width: 1%; float: none; } .navbar .nav li a { font-weight: bold; text-align: center; border-left: 1px solid rgba(255,255,255,.75); border-right: 1px solid rgba(0,0,0,.1); } .navbar .nav li:first-child a { border-left: 0; border-radius: 3px 0 0 3px; } .navbar .nav li:last-child a { border-right: 0; border-radius: 0 3px 3px 0; } 

¿Estoy perdiendo algo?

Trate de permitir que su application.css sea solo para fines ‘requeridos’, allanará su camino para rastrear errores y también aprovechar la stack de activos de Rails3.

En su aplicación / los activos / hojas de estilo / application.css:

 /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the top of the * compiled file, but it's generally better to create a new file per style scope. * *= require_self *= require bootstrap *= require bootstrap_responsive *= require my_styles */ 

En su aplicación / asset / stylesheets / my_styles.css ponga el css personalizado que tiene ahora en application.css.

De esa manera, tus estilos personalizados se cargarán después de todas las cosas de bootstrap, anulando esto.

Para ser honesto, creo que esto es lo que te está sucediendo en este momento: no es bootstrap.css lo que está anulando tus estilos, es bootstrap_responsive ya que se carga después de tus estilos.

Cuando desee anular bootstrap con su propio estilo, entonces su aplicación.css debe cargarse después de la definición de bootstrap.

bootstrap.css cargar bootstrap.css y bootstrap-responsive.css y luego anular sus estilos. Una forma es definir un nuevo bootstrap_and_overrides.css.scss así:

 @import "bootstrap"; @import "bootstrap-responsive"; .well { box-shadow: 0 0 4px #888888; border-radius: 0px 0px 0px 0px; } // more overrrides 

Luego incluya este archivo antes de incluir application.css en su diseño de Rails.