Rails 4 Bootstrap 3.3，媒体查询导致错误答案

【问题标题】：Rails 4 Bootstrap 3.3, media queries causing errorRails 4 Bootstrap 3.3，媒体查询导致错误
【发布时间】：2015-01-29 21:15:14
【问题描述】：

我是新手，但我正在尝试一些我认为应该很容易的事情，但我遇到了 rails 服务器错误。我希望我的文本在更大的设备上分成几列。

我的 html 中有：

<div class="col">
        <p>
            Ricter Web Printing...
        </p>    
</div>

我的 css.scss 有：

.col {
@media (min-width: @screen-hs-min) {
   /* rules for mobile horizontal (480 > 768)  */
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
@media (min-width: @screen-sm-min) {
   /* rules for tablet (768 > 992) */
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
@media (min-width: @screen-md-min) {
   /* rules for desktop (992 > 1200) */
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
@media (min-width: @screen-lg-min) {
   /* rules for large (> 1200) */
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

这些列在没有媒体查询的情况下工作正常。媒体查询是直接从引导站点复制和粘贴的。其他引导程序运行良好，包括响应式导航...

非常感谢任何帮助。

【问题讨论】：

提供错误内容总是有帮助的。此外，您发布的代码中似乎缺少最终的}。您的实际代码中缺少吗？这会导致错误。
不幸的是最后的 } 在那里，这本来是一个简单的修复。错误如下： ActionView::Template::Error (Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was "@screen-hs-min) {" (在 /Users/timbillington/New_Ricter_Site/RicterSite/app/assets/stylesheets/application.css.scss:55)): 2: 3: 4: RicterSite 5: true %> 6: true %> ...
好的，这是一个错字。 @screen-hs-min 应该是 @screen-xs-min。
我试过把hs换成xs，还是报错。请参阅下面的答案了解我的最终结果。

标签： twitter-bootstrap ruby-on-rails-4 media-queries multiple-columns

【解决方案1】：

我有它的工作，仍然不知道为什么我的第一个代码没有工作，但我尝试了这个版本，它是完美的：

.col {
@media (min-width: 480px) {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
@media (min-width: 768px) {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
@media (min-width: 992px) {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
@media (min-width: 1200px) {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

}

我可能会使用我的列号和断点，但它在功能上是完美的。希望对其他人有所帮助...

【讨论】：