轨道4引导3.3，媒体查询导致错误(Rails 4 Bootstrap 3.3, media que

我对于新手，但我想，我觉得应该是很容易的东西，但我发现了一个轨道服务器错误。 我想我的文字打入列于大型设备。

我在我的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;
}

列做工精细，没有媒体查询。 媒体查询被复制，并从引导网站右侧粘贴。 其他引导工作完全包括响应导航...

任何帮助极大的赞赏。

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

}

我会用我的列号玩，破发点，但在功能上是完美的。 希望可以帮助别人...

文章来源: Rails 4 Bootstrap 3.3, media queries causing error