css - 用我自己的自定义样式表覆盖 Bootstrap

Question

您可以看到使用和不使用 Bootstrap 时我的表格样式的差异，但我想要相同的行为。

table styling without bootstrap

table styling after bootstrap

应用程序.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";

通用.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>

问题是当我导入 bootstrap 时，背景属性丢失了；

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

如果有人能帮助我，我将不胜感激!!!

Answer 1

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>

您需要先将 general.css 更改为 general.css.scss 然后将其导入到 application.css.scss 中SCSS 文件(由于您使用的是 SCSS，因此您应该删除当前 application.css.scss 顶部的所有注释/文本/要求):

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

在进行这些更改后，您可能还应该重新启动服务器。