仅在Rails 5中使用bootstrap media-breakpoint

这是将bootstrap mixin添加到Rails项目中的解决方案和后续操作。 rbenv错误？ 和rails，bootstrap，media-breakpoint-only

我的问题：我试图仅使用media-breakpoint并获取各种错误消息。 您可以在上面的链接中看到这些错误消息。

以下是解决方案的摘要：

gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7' 

不支持仅限媒体断点。

gem’bootstrap’，’〜> 4.1.3’仅在文件中支持media-breakpoint（假设你使用rbenv）〜/ .rbenv / versions / 2.5.1 / lib / ruby​​ / gems / 2.5.0 / gems /bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/_breakpoints.scss

此外，如果你有

 gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7' gem 'bootstrap', '~> 4.1.3' 

然后，在你的Gemfile中，在我看来，第二行被忽略，因此，当你引用media-breakpoint时，你只会在加载页面时出错。

下面我记录了我使用的三个文件，以便只使媒体断点工作。

〜/的Gemfile

 source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.5.1' # See https://recordnotfound.com/sprockets-rails-5126 # gem 'sprockets', '~> 4.0' gem 'sprockets' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.2.0' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', ' 3.11' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'mini_racer', platforms: :ruby # Shnelvar gem 'jquery-rails' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use ActiveStorage variant # gem 'mini_magick', '~> 4.8' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.1.0', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', ' 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15', ' 3.3', '>= 3.3.7' # gem 'autoprefixer-rails' gem 'bootstrap', '~> 4.1.3' 

〜/应用/资产/ JavaScript的/ application.js中

 // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require rails-ujs // Shnelvar // From https://github.com/rails/jquery-rails // If you are running Rails 5.1 and up, and if you have included //= require rails-ujs, then jquery_ujs is not needed anymore. You can just add: // require jquery_ujs //= require activestorage //= require turbolinks //= require bootstrap-sprockets //= require_tree . // Shnelvar // See https://github.com/twbs/bootstrap-rubygem //= require jquery3 //= require popper 

〜/应用/资产/样式表/ application.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, or any plugin's * vendor/assets/stylesheets directory 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 bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * * require_tree . * require_self */ // See // https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5 $navbar-default-bg: red; // Shnelvar // See https://github.com/twbs/bootstrap-sass // // See https://stackoverflow.com/questions/51343045/file-to-import-not-found-or-unreadable-bootstrap-sprockets-on-rails-5-2-0 // for why I commented out the next line // @import "bootstrap-sprockets"; // Custom bootstrap variables must be set or imported *before* bootstrap. @import "bootstrap"; // Shnelvar // For ralph-shiny-button etc. @import "ralph"; // Shnelvar // See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size // See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style .nav a{ color: white !important; // font-size: 3.8em !important; font-size: 2.8em; } // See https://getbootstrap.com/docs/4.0/layout/overview/ h1 { @include media-breakpoint-only(xs) { color: red; } @include media-breakpoint-only(sm) { color: green; } @include media-breakpoint-only(md) { color: blue; } @include media-breakpoint-only(lg) { color: yellow; } @include media-breakpoint-only(xl) { color: orange; } } 

请注意

 * require_tree . 

和

 * require_self 

不是

  *= require_tree . *= require_self 

因此由链轮处理作为注释。

请注意：.nav css选择器与仅限介质断点的问题无关。 当在一个html中包含导航栏时，它可以validation引导程序是否正常工作。

欢迎评论。