Question

我的设置

我在Bootstrap for Rails中编辑了.col-lg-4，并在导入语句之后将它们包含在我的custom.css.scss文件中，以包含零填充。

问题

我需要在bootstrap css中覆盖.embed-responsive视频，使其没有width属性并将padding设置为零。我设法通过手动导入引导文件来制定临时解决方案，但我仍然希望使用bootstrap sass gem并覆盖这些属性。

但是它们似乎没有在Custom.css.scss文件中覆盖它们。

混合行为（Custom.css.scss）

问题是，如果我导入Bootstrap-sprockets＆amp; Bootstrap，似乎忽略了我的CSS，我无法设置我需要设置的内容，如上所述。

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

.thumb{
}

.col-lg-4 {
    padding: 50px !important;
}
.embed-responsive .embed-responsive-item,.embed-responsive   embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;height:100%;border:0}

Application.css

 *= require_tree .
 *= require_self
 */

我还使用了rake assets:clean。

编辑：经过一些尝试，测试显示，如果我提供自定义引导程序CSS文件而不在Custom.css.scss中导入引导程序将解决问题。

但是我想尽可能使用bootstrap sass gem。我目前的实施有没有解决方法？

Answer 1

您是否检查过是否可以覆盖变量中的变量$grid-gutter-width？

这是我常用的设置。我不使用require，但手动包含单个CSS来控制层次结构：

 * require_tree .
 * require_self
 */

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

// Bootstrap components
@import "navbar";
@import "forms";

// App components
@import "orders";

要覆盖Bootstrap变量（https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss），我先将其包含在其他内容之前。始终先检查变量覆盖。
要覆盖一些Bootstrap组件，我接下来将它们包含在单独的CSS中。
对于特定于应用的样式，我根据模型/视图对其进行了分类，我为它创建了另一个CSS。

这是非常基本的，但在大多数情况下它都能很好地运作。

覆盖Rails中的Bootstrap custom.css.scss无法按预期工作

1 个答案: