Bootstrap Media查询Rails错误 [英] Bootstrap Media Queries Rails Error

问题描述

我试图通过覆盖引导媒体查询，使小应用程序上的字体更大。

我试图这样做，通过使用引导媒体查询设置h1的字体大小

  @media（min-width：@ screen-sm-min）{
 h1 {font-size：5rem} 
} 
  
 
 
 
只有我收到此Rails错误消息。
 ... ia（min-width：：预期表达式（例如1px，bold），@ screen-sm-min）{
  
我看到在下面的答案，他们是重写通过明确说明宽度，这不会抛出错误了我，但我不知道为什么我不能使用引导变量。我必须在某处设置@ screen-sm-min的值才能使用它吗？
 
 
 
  Rails 4 Bootstrap 3.3，媒体查询导致错误 
解决方案
看起来这个数字解释了引导程序迁移到bootstrap 4网站时发生了什么：
 
 
 
  https://v4-alpha.getbootstrap.com/migration/  
 
 
 
 所有@ screen-变量已在v4.0.0中删除。请使用media-breakpoint-up（），media-breakpoint-down（）或media-breakpoint-only（）Sass mixins或$ grid-breakpoints Sass映射。 
 
 
 
如果你使用sass，你可以为小设备做这样的操作：
  @include media-breakpoint-up（xs）{
 strong {
 font-size：5rem; 
} 
} 
  
但我最终最终设置了值： p> 
 
 
  @media（min-width：576px）{
 strong {
 font-size：4rem; 
} 
} 
  
 
I am trying to make the font on my app larger for small devices by overriding bootstrap media queries. 

I am trying to do it like this, by setting the font size for h1's using bootstrap media queries
@media (min-width: @screen-sm-min) {
  h1{font-size: 5rem}
}
only I get this Rails error message.
Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was "@screen-sm-min) {"
I see in the below answer they are overriding by explicitly stating the width, which doesn't throw the error anymore for me, but I'm not sure why I can't use bootstraps variables. Do I have to set the value of @screen-sm-min somewhere in order to use it?

Rails 4 Bootstrap 3.3, media queries causing error
解决方案
Looks like this number explains what was going on on the bootstrap migrating to bootstrap 4 website:

https://v4-alpha.getbootstrap.com/migration/

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

If you're using sass you can do something like this for small devices: 
@include media-breakpoint-up(xs) {
  strong {
    font-size: 5rem;
  }
}
But I ended up ultimately setting the values:
@media (min-width: 576px) {
  strong {
    font-size: 4rem;
  }
}


                        
这篇关于Bootstrap Media查询Rails错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！