Rails 4 Bootstrap 3.3，媒体查询导致错误 [英] Rails 4 Bootstrap 3.3, media queries causing error

问题描述

我是新手，但是我正在尝试一些我认为应该很容易的事情，但是却遇到了Rails服务器错误.我希望我的文字分成较大的设备列.

I am a newb, but I'm trying something that I think should be easy, but I'm getting a rails server error. I want my text to break into columns for larger devices.

我在自己的html中:

I have in my html:

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

我的css.scss具有:

my css.scss has:

.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;
}

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

The columns work fine with no media query. The media query is copied and pasted right from the bootstrap site. Other bootstrap is working perfectly including a responsive nav...

任何帮助都将不胜感激.

Any help greatly appreciated.

推荐答案

我可以使用它，但仍不确定为什么我的第一个代码不起作用，但是我尝试了此版本，它是完美的:

I have it working, still not sure why my first code didn't work, but I tried this version and it is perfect:

.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;
}

}

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

I might play with my column numbers and break points, but it is functionally perfect. Hope that helps someone else...

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