用 custom.css.scss 覆盖引导程序？

Question

我正在创建一个 Ruby on Rails 应用程序，并且正在为我的项目做一些样式设置。

我正在使用 Bootstrap gem v3.0.0，但我不知道在我的 Rails 项目中添加自定义 CSS 文件的位置以及调用它的位置。

我有一个着陆页：

<div class="container-full">
<div class="row">
    <div class="col-lg-12 text-center v-center">
         <h1>Hello Landing</h1>

        <p class="lead">A sign-up page example for Bootstrap 3</p>
        <br>
        <br>
        <br>
        <div class="input-group" style="width:340px;text-align:center;margin:0 auto;">
            <input class="form-control input-lg" title="Don't worry. We hate spam, and will not share your email with anyone."
            placeholder="Enter your email address" type="text"> <span class="input-group-btn btn-default"><button class="btn btn-lg btn-primary" type="button">OK</button></span>

        </div>
    </div>
</div>
<!-- /row -->
<div class="row">
    <div class="col-lg-12 text-center v-center" style="font-size:39pt;"> <a href="#"><i class="glyphicon glyphicon-google-plus"></i></a>  <a href="#"><i class="glyphicon glyphicon-facebook"></i></a> 
        <a
        href="#"><i class="glyphicon glyphicon-twitter"></i>
            </a> <a href="#"><i class="glyphicon glyphicon-github"></i></a>  <a href="#"><i class="glyphicon glyphicon-pinterest"></i></a>

    </div>
</div>
<br>
<br>
<br>
<br>
<br>

我有一个自定义 CSS 页面：

html,body {
  height:100%;
}

h1 {
  font-family: Arial,sans-serif
  font-size:80px;
  color:#DDCCEE;
}

.lead {
    color:#DDCCEE;
}


/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
  min-height:100%;
  background-color:#110022;
  color:#eee;
  overflow:hidden;
}

.container-full a {
  color:#efefef;
  text-decoration:none;
}

.v-center {
  margin-top:7%;
}

我的 application.css 如下所示：

/*
 * 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */
group :assets do
  gem 'bootstrap-rails'
end

Answer 1

bootstrap-rails 已被弃用，请改用bootstrap-sass。

宝石文件：

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

安装 gem 后，请确保重新启动您的应用程序/网络服务器。

然后将您的app/assets/stylesheets/application.css 文件重命名为app/assets/stylesheets/application.css.scss 并添加以下内容：

@import "bootstrap";

html,body {
  height:100%;
}

h1 {
  font-family: Arial,sans-serif
  font-size:80px;
  color:#DDCCEE;
}

.lead {
  color:#DDCCEE;
}


/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
  min-height:100%;
  background-color:#110022;
  color:#eee;
  overflow:hidden;
}

.container-full a {
  color:#efefef;
  text-decoration:none;
}

.v-center {
  margin-top:7%;
}

Answer 2

在app/assets/stylesheets下复制你的自定义CSS文件，你应该在application.css中声明你的引导文件，然后在*= require_tree .之后添加以下内容

*= require bootstrap
*= require bootstrap_responsive

您的自定义 CSS 应该占上风，并且不应该有任何冲突。

Answer 3

搜索包含引导 CSS 的模板文件，并在其下添加您自己的 CSS 链接。如果仍然无法正常工作，请尝试将!important 添加到您的样式中。