Không thể thay đổi các yếu tố chủ đề của bootstrap màu

Question

Đây là lần đầu tiên tôi sử dụng chủ đề bootstrap với ứng dụng web ASP.net của tôi, do đó tôi đã gặp một số khó khăn với việc chỉnh sửa CSS.

Tôi nhận mẫu khởi động này trực tuyến và để đáp ứng nhu cầu của tôi, tôi muốn thay đổi màu của chân trang thành màu khác. Dưới đây là mã trong html

<div class="footer_bottom"> 
     <div class="copy"> 
      <p>Copyright &copy; 2014</p> 
     </div> 
    </div> 

và đây là css

.footer_bottom { 
padding: 2em 0; 
/*background: #7cc4cc;*/ 
background: #5DBCD2; 

}

Về cơ bản, tôi muốn thay đổi màu sắc của div từ # 7cc4cc để # 5DBCD2. Khi tôi chạy trang của tôi trong google chrome và chọn tùy chọn kiểm tra phần tử mã được cho là hoạt động, nhưng trong thuộc tính css backgroud: # 7cc4cc được cắt ra phía trên nền dòng: # 5DBCD2 (không bị cắt) nhưng màu của div được hiển thị vẫn là # 7cc4cc. Tóm lại, tôi không thể thay đổi các thuộc tính màu CSS của chủ đề vì lý do nào đó. Mọi sự trợ giúp sẽ rất được trân trọng.

Answer 1

Bạn có thể học rất nhiều bằng cách đọc khoảng CSS Specificity. CSS là về quy tắc trên quy tắc, vì vậy những gì tôi nghĩ đang xảy ra, đó là một số quy tắc đang nhận được áp dụng trên của bạn:

.footer_bottom { background: #5DBCD2; } 

Kiểm tra đối với bất kỳ quy tắc có tính đặc hiệu cao và thực hiện kê khai .footer-bottom này cao hơn.

Giải pháp !important trong các câu trả lời khác không phải là điều bạn muốn làm. Theo thời gian những điều này sẽ cắn bạn trong ass của bạn, khi họ thổi đặc trưng của bạn thông qua mái nhà.

Answer 2

Bạn đang cố gắng để ghi đè lên css bootstrap, do đó bạn cần phải thêm !important để nền thay đổi màu sắc của bạn như vậy:

.footer_bottom { 
padding: 2em 0 !important; 
/*background: #7cc4cc;*/ 
background: #5DBCD2 !important; 

Answer 3

Sử dụng !important để ghi đè lên phong cách bootstrap:

.footer_bottom { 
     padding: 2em 0 !important; 
     background: #5DBCD2 !important; 
    }