obtenir application.css pour remplacer le bootstrap

Je suis en train de personnaliser mon application rails barre de navigation et nous avons ajouté la css à l'application.css. Je sais que l'application.css est référencé correctement, car l'application est de choisir d'autres style. Mais la barre de navigation css est d'essayer de remplacer ce qui est déjà dans le bootstrap.css, et l'application n'est pas reconnaissant...

application.html.erb (mise en page)

<%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= analytics_init if Rails.env.production? %>
    <link href="../assets/bootstrap-responsive.css" rel="stylesheet">

application.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;
}

Ai-je raté quelque chose?

source d'informationauteur tessad

  1. 19

    Essayez de laisser votre demande.css juste pour "requiert" des fins, il va ouvrir le chemin à suivre les erreurs ainsi que de prendre avantage de Rails3 actifs pipeline de la pile.

    Dans votre app/assets/css/de l'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
*/

    Dans votre app/assets/css/my_styles.css mettre le css personnalisé que vous avez maintenant en application.css.

    De cette façon, vos styles personnalisés sera chargé après tout le bootstrap choses, l'annulant.

    Pour être honnête, je pense que c'est ce qui se passe pour vous en ce moment: il n'est pas de bootstrap.css ce qui est primordial de styles, il est bootstrap_responsive qu'il est chargé après vos styles.

  2. 2

    Lorsque vous voulez remplacer bootstrap avec votre propre style, votre application.css doit être chargé après bootstrap définition.

  3. 1

    Vous devez charger bootstrap.css et bootstrap-responsive.css puis remplacer vos styles. Une façon est de définir une nouvelle bootstrap_and_overrides.css.scss comme suit:

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

    Ensuite inclure ce fichier avant de l'inclure application.css dans les rails de mise en page.