我如何在计算机和移动设备上使用不同的跨度？

Question

我想在电脑上使用 :span="5"

 <el-col :span="5" class="container">

我想用手机

 <el-col  class="container">

o 我如何使用 sm、md、lg？

Answer 1

您可以使用媒体查询，并根据屏幕大小显示或隐藏它们。

<el-col :span="5" class="container hide-mobile">
<el-col  class="container show-mobile">


@media only screen and (max-width: 770px) {
    .show-mobile {
        display:block;
    }
    .hide-mobile {
        display:none;
    }
}

.hide-mobile {
    display:block;
}

.show-mobile {
    display:none;
}

这会将第一个元素默认显示为块，在移动屏幕尺寸上将其设置为 none。

第二个元素默认隐藏，在移动设备上显示为一个块。

Answer 2

您可以在 div 上制作更多内容，并针对尺寸确定 div 是否可见，请查看：

或者您可以使用 jquery 或 javascrript 来更改不同尺寸的项目，但使用上述方法更容易。

我如何在计算机和移动设备上使用不同的跨度？

How can i use differents span for computer and mobile?

css

bootstrap-4

element-plus