用我自己的自定义样式表覆盖引导程序

Question

You can see the differences what i get for my table styling with and without using bootstrap but i want the same behavior instead.

table styling without bootstrap

table styling after bootstrap

application.css.scss

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 *= require_tree .
  */



@import "bootstrap-sprockets";
@import "bootstrap";

general.css

.pos { color: #000; }
.neg { color: #f00; }


h1 {
    color:orange;
    text-align: center;
}
table.listing{
    background: #C3D9FF none repeat scroll 0% 0%;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:20px 20px 40px;
    border-radius:10px;
}
table.listing tr.tr-head{
    background: #fff;
    color:#990a10;
    font-weight:bold;
    text-align:center;
}
table.listing .tr-head td{
    padding:5px;
    padding-left:10px;

}
table.listing .tr-odd{
    background: #fff;
    text-align:center;
    padding:50px;
    color:#27292b;
    font-weight:600;
    font-size:14px;
}
table.listing .tr-even{
    background: #f1f6ff;
    text-align:center;
    padding:50px;
    color:#27292b;
    font-weight:600;
    font-size:14px;
}

table.listing td.col-1{
    width:10%;
    padding: 5px;
    padding-left:10px;
}


table.listing td.col-3{
    width:13%;
    padding: 5px;
    padding-left:10px;
}

index.html.erb

<h1>361° YAZD Statement</h1>

<% balance = 0 %>

  <table class="listing" align="center" width="100%" cellpadding="1" cellspacing="1">  
  <tr class="tr-head">
    <td>Date</td>
    <td>Description</td>
    <td>Amount</td>
    <td>Discount</td>
    <td>Paid</td>
    <td>Balance</td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <% @statements.each do |statement| %>

  <tr class="tr-<%= cycle('odd', 'even') %>">

    <td class="col-1"><%= statement.date %></td>
    <td class="col-3"><%= statement.description %></td>

    <td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td>

    <td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td>

    <td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td>


<% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %>

        <% color = balance >= 0 ? "pos" : "neg" %>

        <td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td>

</tr>

    <% end %>

  </table>

The problem is when I import bootstrap the background property is missing;

table.listing{
        background: #C3D9FF none repeat scroll 0% 0%;
}

I really appreciate if anybody could help me out!!!

Answer 1

In your HTML first load bootstrap and then load your custom stylesheets. Something like this:

<!-- styles -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />

This solved my problem when I experienced the same issue yesterday.

Answer 2

 div h1 { color: orange; text-align: center; } .pos { color: #000; } .neg { color: #f00; } .myTable { background: #C3D9FF none repeat scroll 0% 0%; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 20px 20px 40px; } .myTable .table, .myTable tr { border: 2px solid #C3D9FF; } .table.listing tr.tr-head { background: #fff; color: #990a10; font-weight: bold; border: 2px solid #C3D9FF; } .table.listing .tr-head td { padding: 5px; border: 2px solid #C3D9FF; } .table.listing .tr-odd { background: #fff; color: #27292b; font-weight: 600; font-size: 14px; border: 2px solid #C3D9FF; } .table.listing .tr-even { background: #f1f6ff; color: #27292b; font-weight: 600; font-size: 14px; border: 2px solid #C3D9FF; } .table.listing td.col-1 { width: 10%; padding: 5px; border: 2px solid #C3D9FF; } .table.listing td.col-3 { width: 13%; padding: 5px; border: 2px solid #C3D9FF; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <h1>361° YAZD Statement</h1> <div class="table-responsive myTable"> <table class="table table-bordered listing text-center"> <tr class="tr-head"> <td>Date</td> <td>Description</td> <td>Amount</td> <td>Discount</td> <td>Paid</td> <td>Balance</td> </tr> <tr class="tr-even"> <td class="col-1">11-20-2015</td> <td class="col-3">Something</td> <td class="col-1">10,000</td> <td class="col-1 neg">20,000</td> <td class="col-1 neg">20,000</td> <td class="col-1">50,000</td> </tr> <tr class="tr-odd"> <td class="col-1">11-20-2015</td> <td class="col-3">Something</td> <td class="col-1">10,000</td> <td class="col-1 neg">20,000</td> <td class="col-1 neg">20,000</td> <td class="col-1">50,000</td> </tr> <tr class="tr-even"> <td class="col-1">11-20-2015</td> <td class="col-3">Something</td> <td class="col-1">10,000</td> <td class="col-1 neg">20,000</td> <td class="col-1 neg">20,000</td> <td class="col-1">50,000</td> </tr> <tr class="tr-odd"> <td class="col-1">11-20-2015</td> <td class="col-3">Something</td> <td class="col-1">10,000</td> <td class="col-1 neg">20,000</td> <td class="col-1 neg">20,000</td> <td class="col-1">50,000</td> </tr> </table> </div> </div> 

You need to first change general.css to general.css.scss then import it into application.css.scss with your other SCSS files (and since you're using SCSS you should remove all of the comments/text/requires that you have at the top of your current application.css.scss ):

@import "bootstrap-sprockets";
@import "bootstrap";
@import "general";

You should probably restart your server as well after these changes are made.