Bootstrap Rails SCSS 不响应

Posted 2023-03-06

【中文标题】Bootstrap Rails SCSS 不响应

【英文标题】：Bootstrap Rails SCSS Not Responsive

【发布时间】：2015-06-07 04:54:48

【问题描述】：

我刚刚进入 Rails 并且已经遇到了很大的障碍。我从一个简单的视图开始，然后导航到 / 会呈现一切正常，在桌面视图上。

我正在运行 Bootstrap 和 Bootswatch，一切似乎都很好，直到我在 Chrome 开发工具中打开移动视口。该网站根本没有响应，但样式都在那里。

在 Chrome 开发工具中，媒体查询在我选择的任何视口中都以 media="all" 的形式返回。奇怪的是，当我在移动视图上导航到/# 然后/ 时，桌面视图只是被压扁并且不符合。

我的 Gemfile：

source 'http://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails'
# Use Uglifier as compressor for javascript assets
gem 'uglifier'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails'
# Use Bootswatch and Bootstrap for styling
gem 'bootswatch-rails'
gem 'bootstrap-sass'
# 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'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

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

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

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'

  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

我的 application.css.scss：（也应该是 .sass 还是 .scss，我都试过了）

@import "bootstrap-sprockets";

@import "bootswatch/readable/variables";

@import "bootstrap";

@import "bootswatch/readable/bootswatch";

我的 application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

任何帮助都将不胜感激，我已经花了整整 2 个小时试图让它工作！

【问题讨论】：

将此添加到头部：

@cristian Shoot，真不敢相信我忘记了！哦，好吧，吸取教训。您应该将其添加为答案。

CSS3 media queries not working的可能重复

【参考方案1】：

将此添加到头部：

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

为什么会这样？ （它对我有用，我很高兴，但很好奇）谢谢！