首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何以不同的屏幕尺寸排列所需输出的行和列:

如何以不同的屏幕尺寸排列所需输出的行和列:
EN

Stack Overflow用户
提问于 2019-12-16 18:22:48
回答 1查看 44关注 0票数 0

我试着搜索这个,可能是我使用了错误的术语,但我找不到任何关于如何做到这一点的文档:

在大屏幕上,我想要以下输出:

在较小的屏幕上,我想要这样的输出:**EDIT: Div 3& 4应该显示6列,而不是4列。

代码语言:javascript
代码运行次数:0
运行
复制
    <v-row>
      <v-col cols="12" lg="8" md="12" class="mb-4">
        <v-row>
          <v-col cols="12">
            DIV 1
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12">
            DIV 2
          </v-col>
        </v-row>
      </v-col>
      <v-col lg="4" md="6" sm="6" cols="12" class="mb-4">
        <v-row>
          <v-col sm="12">
            DIV 3
          </v-col>
        </v-row>
        <v-row>
          <v-col sm="12">
            DIV 4
          </v-col>

        </v-row>
      </v-col>

    </v-row>

现在的问题是,当前的代码Div 3和4都是不同的行,而不是在同一行中。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-16 20:33:09

3&4协议应该在相同的v-row中并添加cols="6" lg="12"...

代码语言:javascript
代码运行次数:0
运行
复制
       <v-col lg="4" cols="12" class="mb-4">
           <v-row>
               <v-col cols="6" lg="12" class="blue"> DIV 3 </v-col>
               <v-col cols="6" lg="12" class="blue"> DIV 4 </v-col>
           </v-row>
       </v-col>

Demo

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59354631

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档