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。

的Gemfile：

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

安装gem后，请务必重新启动app / webserver。

然后将您的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

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

Answer 3

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

*= require bootstrap
*= require bootstrap_responsive

您的自定义CSS应该占优势，不应该有任何冲突。

用custom.css.scss覆盖bootstrap？

3 个答案: