Rails 4 Bootstrap 3.3, media queries causing error

问题

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.

I have in my html:

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

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.

回答1:

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

来源：https://stackoverflow.com/questions/28224728/rails-4-bootstrap-3-3-media-queries-causing-error