Question

我是一个新手，但我尝试了一些我认为应该很容易的事情，但我收到了一个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;
}

列没有媒体查询正常工作。直接从引导站点复制和粘贴媒体查询。其他引导程序工作正常，包括响应式导航......

非常感谢任何帮助。

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，媒体查询导致错误

1 个答案: