css - 如何将选择按钮放置在节目时间表扩展面板的右侧？

Question

我的代码是这样的:

<div id="app">
  <v-app id="inspire">
    <v-btn class="success">Select</v-btn>
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-header>Show Schedule</v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-simple-table>
            <template v-slot:default>
              <tbody>
                <tr>
                  <td>Monday</td>
                  <td>10.00</td>
                </tr>
                <tr>
                  <td>Tuesday</td>
                  <td>20.00</td>
                </tr>
                <tr>
                  <td>Wednesday</td>
                  <td>15.00</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-app>
</div>

我的代码笔是这样的:https://codepen.io/happyforever/pen/pooBYgV?editors=1010

所以在手机版中打开时，不会占用太多空间

我该怎么做？

更新:

我希望它看起来像这样:https://codepen.io/happyforever/pen/gOOJbpe?editors=1010

但是如果用户点击 show schedule，我希望 cols 从 cols = 8 更改为 cols = 12

手机版查看

我该怎么做？

Answer 1

您可以在移动版本中将列数从 8 更改为 12。但是您需要使用 v-flex 来实现相同的而不是 v-cols

Here is the working codepen: https://codepen.io/chansv/pen/jOOozoe?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-row>
       <v-flex md8 xs12>
          <v-expansion-panels>
            <v-expansion-panel>
              <v-expansion-panel-header>Show Schedule</v-expansion-panel-header>
              <v-expansion-panel-content>
                <v-simple-table>
                  <template v-slot:default>
                    <tbody>
                      <tr>
                        <td>Monday</td>
                        <td>10.00</td>
                      </tr>
                      <tr>
                        <td>Tuesday</td>
                        <td>20.00</td>
                      </tr>
                      <tr>
                        <td>Wednesday</td>
                        <td>15.00</td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-flex>
        <v-flex md4 xs6>
            <v-btn class="success">Select</v-btn>
         </v-flex>
     </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})