Почему Bootstrap (3) не отображается правильно в RoR?

Я пытаюсь обновить внешний вид страницы devise, используя Bootstrap. Я использую gem по anjlab для Bootstrap 3.Почему Bootstrap (3) не отображается правильно в RoR?

Я бегу Rails 4.0 и я пытаюсь повторить пример нашел here:

enter image description here

но когда я скопировать HTML I получить следующее в моем приложении:

enter image description here

Я не уверен, что я делаю неправильно или если я не написал что-то правильно. Может кто-то помочь, чтобы я мог получить свою страницу на странице, похожую на пример на веб-сайте начальной загрузки?

Markup:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Manager</title> 
    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" /> 
<link data-turbolinks-track="true" href="/assets/volunteers.css?body=1" media="all" rel="stylesheet" /> 
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/volunteers.js?body=1"></script> 
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> 
    <meta content="authenticity_token" name="csrf-param" /> 
<meta content="0N/QEWp3XUuCrFUPqKQ4VDyy6ALfum9TwFoZDg8f2r0=" name="csrf-token" /> 
</head> 
<body> 

<div class="container"> 

     <form class="form-signin"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <input type="text" class="form-control" placeholder="Email address" autofocus=""> 
     <input type="password" class="form-control" placeholder="Password"> 
     <label class="checkbox"> 
      <input type="checkbox" value="remember-me"> Remember me 
     </label> 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
     </form> 

    </div> 

</body> 
</html>

Это мой Gemfile:

source 'https://rubygems.org' 

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '4.0.0' 

# Use sqlite3 as the database for Active Record 
gem 'sqlite3' 

# Use SCSS for stylesheets 
gem 'sass-rails', '~> 4.0.0' 

#Bootstrap 3 
gem 'anjlab-bootstrap-rails', '~> 3.0.0.3', :require => 'bootstrap-rails' 

gem 'bootstrap-sass', '2.3.2.0' 

# Use Uglifier as compressor for JavaScript assets 
gem 'uglifier', '>= 1.3.0' 

# Use CoffeeScript for .js.coffee assets and views 
gem 'coffee-rails', '~> 4.0.0' 

# See https://github.com/sstephenson/execjs#readme for more supported runtimes 
# gem 'therubyracer', platforms: :ruby 

# Use jquery as the JavaScript library 
gem 'jquery-rails' 

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks 
gem 'turbolinks' 

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
gem 'jbuilder', '~> 1.2' 

group :doc do 
    # bundle exec rake doc:rails generates the API under doc/api. 
    gem 'sdoc', require: false 
end 

gem 'devise' 
gem 'faker', '~> 1.0.1' 


# Use ActiveModel has_secure_password 
# gem 'bcrypt-ruby', '~> 3.0.0' 

# Use unicorn as the app server 
# gem 'unicorn' 

# Use Capistrano for deployment 
# gem 'capistrano', group: :development 

# Use debugger 
# gem 'debugger', group: [:development, :test]

Это мой 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 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 . 
*/

И мой файл custom.css.scss :

@import "twitter/bootstrap";

источник

2013-10-15 Sheldon

Вы можете разместить разметки/CSS? В противном случае это трудно диагностировать. – Slicedpan

Стреляй .. Я знал, что кое-что забыл! Сделаю. – Sheldon

Вы забыли другой стиль: signin.css

body { 
    padding-top: 40px; 
    padding-bottom: 40px; 
    background-color: #eee; 
} 

.form-signin { 
    max-width: 330px; 
    padding: 15px; 
    margin: 0 auto; 
} 
.form-signin .form-signin-heading, 
.form-signin .checkbox { 
    margin-bottom: 10px; 
} 
.form-signin .checkbox { 
    font-weight: normal; 
} 
.form-signin .form-control { 
    position: relative; 
    font-size: 16px; 
    height: auto; 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
.form-signin .form-control:focus { 
    z-index: 2; 
} 
.form-signin input[type="text"] { 
    margin-bottom: -1px; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
} 
.form-signin input[type="password"] { 
    margin-bottom: 10px; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
}

источник

2013-10-15 15:47:27

Почему Bootstrap (3) не отображается правильно в RoR?

ответ

Смежные вопросы