nhận application.css để ghi đè bootstrap

Question

Tôi đang cố gắng tùy chỉnh thanh điều hướng ứng dụng đường ray của mình và đã thêm css vào application.css. Tôi biết rằng application.css đang được tham chiếu chính xác, vì ứng dụng đang chọn kiểu dáng khác từ nó. Nhưng navbar css đang cố gắng để ghi đè lên những gì đã có trong bootstrap.css, và các ứng dụng không nhận ra nó ...

application.html.erb (layout)

<%= 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; 
} 

Tôi có bỏ lỡ điều gì đó không?

Answer 1

Hãy thử để cho ứng dụng của bạn.css chỉ cho mục đích 'yêu cầu', nó sẽ mở đường cho bạn để theo dõi lỗi cũng như tận dụng lợi thế của ngăn xếp đường ống tài sản Rails3.

Trong bạn ứng dụng/tài sản/stylesheets/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 
*/ 

Trong ứng dụng của bạn/tài sản/stylesheets/my_styles.css đặt css tùy chỉnh mà bạn có bây giờ trong application.css.

Bằng cách đó, kiểu tùy chỉnh của bạn sẽ được tải sau tất cả các công cụ khởi động, ghi đè lên.

Thành thật mà nói tôi nghĩ rằng đây là những gì đang xảy ra với bạn ngay bây giờ: nó không phải là bootstrap.css ghi đè kiểu của bạn, nó là bootstrap_responsive vì nó được tải sau kiểu của bạn.

Answer 2

Bạn cần tải bootstrap.css và bootstrap-responsive.css và sau đó ghi đè kiểu của mình. Một cách là để xác định một mới bootstrap_and_overrides.css.scss như vậy:

@import "bootstrap"; 
@import "bootstrap-responsive"; 

.well { 
    box-shadow: 0 0 4px #888888; 
    border-radius: 0px 0px 0px 0px; 
} 
// more overrrides 

Sau đó, bao gồm tập tin này trước khi bạn bao gồm application.css trong cách bố trí đường ray của bạn.

Answer 3

Khi bạn muốn ghi đè bootstrap theo kiểu của riêng mình, thì tệp application.css của bạn phải được tải sau định nghĩa bootstrap.