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

您可以看到我在使用引导和不使用引导的情况下对表格样式所做的更改，但我希望使用相同的行为

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>

---

如果有人能帮我，我真的很感激

在HTML中，首先加载引导，然后加载自定义样式表。大概是这样的：

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

这解决了我昨天遇到的问题。

分区h1{ 颜色：橙色； 文本对齐：居中； } .pos{ 颜色：000； } 内格先生{ 颜色：f00； } .我的桌子{ 背景：C3D9FF无重复滚动0%0%； -moz边界半径：10px； -webkit边界半径：10px； 边界半径：10px； 填充：20px 20px 40px； } .myTable.table， .myTable tr{ 边框：2个实心C3D9FF； } .table.listing tr.tr-head{ 背景：fff； 颜色：990a10； 字体大小：粗体； 边框：2个实心C3D9FF； } .table.listing.tr head td{ 填充物：5px； 边框：2个实心C3D9FF； } .table.listing.tr奇数{ 背景：fff； 颜色：27292b； 字号：600； 字体大小：14px； 边框：2个实心C3D9FF； } .table.listing.tr偶数{ 背景：f1f6ff； 颜色：27292b； 字号：600； 字体大小：14px； 边框：2个实心C3D9FF； } .table.listing td.col-1{ 宽度：10%； 填充物：5px； 边框：2个实心C3D9FF； } .table.listing td.col-3{ 宽度：13%； 填充物：5px； 边框：2个实心C3D9FF； } 361°YAZD语句 日期 描述 数量 折扣 支付 均衡 11-20-2015 某物 10,000 20,000 20,000 50,000 11-20-2015 某物 10,000 20,000 20,000 50,000 11-20-2015 某物 10,000 20,000 20,000 50,000 11-20-2015 某物 10,000 20,000 20,000 50,000

---

谢谢你的回复。你的意思是在app/views/layouts/application.html.erb中加载我的自定义样式表，即general.css吗？在html文件中加载引导后加载自定义样式表谢谢你的回复。我遵循了前面提到的所有步骤，但它仍然不起作用……看起来CSS一般不会覆盖引导CSS。您可以通过更改body{background:red；}之类的内容来测试您的general.css.scss，看看它是否正常工作，并在Rails之外使用引导程序为您当前的css编写文本，您就会明白我的意思了。我已经添加了一些CSS，这些CSS与您正在尝试的内容非常接近。看到更新的答案。谢谢你的解释。最后，我得到了我所期望的。谢谢你的大力支持。坚持下去！！！没问题，很高兴我能帮忙。

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