Question

我有一个新的rails项目，它正在使用以下gem：

gem 'bootstrap-sass'

我正在使用水平格式的CSS类 - 默认情况下：

text-align:right; as part of .horizontal-form

我想覆盖它，以便所有标签都有text-align:left;

在我的rails项目中，在样式表下我有以下内容：

1st_load_framework.scss

其中：

// import the CSS framework

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

...bunch of css classes and @variables. 

//I have tried adding:

.horizontal-form{ text-align:left; } into this file however, it is overriding by the generated sass CSS.

application.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 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 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.
 *
@import "bootstrap-sprockets";
@import "bootstrap";
*= require_tree .
*= require_self
 */



.sign-up{
    background-color:#95ccfb;
}

.log-in{
    background-color:#75d86a;
}


.horizontal-form{ text-align:left !important; }

我也尝试过添加：

 .horizontal-form{ text-align:left; }

到application.scss的底部无济于事。

如何制作这样的覆盖？我不相信这个特定的类有一个sass变量，所以我在这里寻找一个普通的CSS覆盖 - 对于我在rails中的其余项目可扩展的东西会很棒。

使用Rails 5.1.1，bootstrap 3

请帮忙！

Answer 1

由于你要覆盖引导程序设置，我猜测CSS正在编译你的更改，而不是引导程序CSS声明它的位置。由于它在级联中较低，因此优先考虑。我会尝试让它读起来像这样：

.horizontal-form{ text-align:left !important; }

这应该覆盖任何先前的类定义。尽管如此，请谨慎使用！重要的是，如果过度使用会导致一些问题。

修改

重新排列您的资产管道：

*= require_self */ @import "bootstrap-sprockets"; @import "bootstrap"; @import "1st_load_framework";

资产管道也从上到下加载，因此在Bootstrap之后加载自定义CSS。

Rails以有条理的方式覆盖bootstrap的css

1 个答案: