将主要内容 Package 在v-col中并为不同的断点设置显示列数是否有效？

<v-app-bar />
<v-main>
  <v-container fluid>
    <v-row dense justify="center">
      <v-col id="content-wrapper"
        cols="12" md="8" lg="6"
      >
        <v-sheet
          color="grey-lighten-2"
          height="96"
          class="d-flex justify-center align-center"
        >Content</v-sheet>
      </v-col>
    </v-row>
  </v-container>
</v-main>

codepen example
如果需要更精确的响应，您还可以使用标准CSS和media queries，使用您自己的自定义断点来实现您的目标。

@media screen and (max-width: 960px) {
  #content-wrapper {
    width: 300px
  }
}
@media screen and (min-width: 960px) {
  #content-wrapper {
    width: 600px
  }
}
@media screen and (min-width: 1600px) {
  #content-wrapper {
    width: 1000px
  }
}

codepen example

答案似乎是：

• 要设置应用程序栏内部内容的宽度，请使用具有max-width CSS样式设置的内部v容器
• 要设置应用程序的宽度，请在v-container上设置相同的max-width。
• 要在屏幕变窄时隐藏侧边栏，请使用@media查询，在应该隐藏的内容上设置display: none，在应该占据屏幕整个宽度的内容上设置width: 100%。

下面是一个CodePen，显示了一个堆栈溢出风格的布局，随着屏幕变窄，各种div消失了。它没有为内部div使用Vuetify组件，但如果您想要传统的两列/三列布局，则可以使用v-row和v-col Vuetify组件。应用栏和主容器是Vuetify组件，它们的宽度由手动CSS设置，而不是Vuetify帮助类，如上所述。

https://codepen.io/NathanWailes/pen/ExdzqBM

<script type="text/x-template" id="app-template">
  <v-app>
    <v-app-bar
      density="compact"
      elevation=0
    >
      <v-container class="inner-app-bar">
        <template v-slot:prepend>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </template>

        <v-app-bar-title>Stack Overflow</v-app-bar-title>

        <template v-slot:append>
          <v-btn icon="mdi-dots-vertical"></v-btn>
        </template>
      </v-container>
    </v-app-bar>

    <v-main>
      <v-container class="main-container">
        <div class="left-sidebar"></div>
        <div class="inner-content">
          <div class="question-header"></div>
          <div class="mainbar"></div>
          <div class="sidebar"></div>
        </div>
      </v-container>
    </v-main>
  </v-app>
</script>

<div id="app"></div>

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
}).use(vuetify).mount('#app')

.inner-app-bar {
  max-width: 1264px;
  background: darkolivegreen;
}
.inner-content {
  background: grey;
  height: 500px;
  display: inline-block;
  width: calc(100% - 164px);
}
.left-sidebar {
  width: 164px;
  background: darkslategrey;
  height: 500px;
  display: inline-block;
}
.question-header {
  height: 100px;
  background: orange;
}
.sidebar {
  float: right;
  width: 300px;
  height: 400px;
  background: #f1e5bc;
}
.v-container.main-container {
  max-width: 1264px;
  padding: 0;
  background: olive;
}
@media (max-width: 640px) {
  .left-sidebar {
    display: none;
  }
  .inner-content {
    width: 100%;
  }
}
@media (max-width: 980px) {
  .sidebar {
    display: none;
  }
}