将v-row放在v-tab-item的末尾位置。

huangapple
go评论85阅读模式
英文:

How to position a v-row at the end of a v-tab-item

问题

I currently have a v-tab vuetify and inside it a v-tab-item containing three v-rows. I'm trying to align the last v-row to the end of the container as shown in the attached image.

将v-row放在v-tab-item的末尾位置。

Below is the code example:

  1.     <v-container class="pa-0">
  2.         <v-card flat>
  3.           <v-tabs fixed-tabs>
  4.             <v-tab>
  5.               tab 1
  6.             </v-tab>
  7.     
  8.             <v-tab>
  9.               tab 2
  10.             </v-tab>
  11.     
  12.             <v-tab-item>
  13.               <v-row
  14.                 style="border: 2px solid red;"
  15.                 no-gutters
  16.               >
  17.                 <v-col>
  18.                   Lorem ipsum...
  19.                 </v-col>
  20.               </v-row>
  21.     
  22.               <v-row
  23.                 style="border: 2px solid purple;"
  24.                 no-gutters
  25.               >
  26.                 <v-col>
  27.                   Lorem ipsum...
  28.                 </v-col>
  29.               </v-row>
  30.     
  31.               <v-row
  32.                 style="border: 2px solid orange;"
  33.                 no-gutters
  34.               >
  35.                 <v-col>
  36.                   Lorem ipsum...
  37.                 </v-col>
  38.               </v-row>
  39.             </v-tab-item>
  40.           </v-tabs>
  41.         </v-card>
  42.     </v-container>
英文:

I currently have a v-tab vuetify and inside it a v-tab-item containing three v-rows. I'm trying to align the last v-row to the end of the container as shown in the attached image.

将v-row放在v-tab-item的末尾位置。

Below is the code example

  1.     &lt;v-container class=&quot;pa-0&quot;&gt;
  2.         &lt;v-card flat&gt;
  3.           &lt;v-tabs fixed-tabs&gt;
  4.             &lt;v-tab&gt;
  5.               tab 1
  6.             &lt;/v-tab&gt;
  7.     
  8.             &lt;v-tab&gt;
  9.               tab 2
  10.             &lt;/v-tab&gt;
  11.     
  12.             &lt;v-tab-item&gt;
  13.               &lt;v-row
  14.                 style=&quot;border: 2px solid red;&quot;
  15.                 no-gutters
  16.               &gt;
  17.                 &lt;v-col&gt;
  18.                   Lorem ipsum...
  19.                 &lt;/v-col&gt;
  20.               &lt;/v-row&gt;
  21.     
  22.               &lt;v-row
  23.                 style=&quot;border: 2px solid purple;&quot;
  24.                 no-gutters
  25.               &gt;
  26.                 &lt;v-col&gt;
  27.                   Lorem ipsum...
  28.                 &lt;/v-col&gt;
  29.               &lt;/v-row&gt;
  30.     
  31.               &lt;v-row
  32.                 style=&quot;border: 2px solid orange;&quot;
  33.                 no-gutters
  34.               &gt;
  35.                 &lt;v-col&gt;
  36.                   Lorem ipsum...
  37.                 &lt;/v-col&gt;
  38.               &lt;/v-row&gt;
  39.             &lt;/v-tab-item&gt;
  40.           &lt;/v-tabs&gt;
  41.         &lt;/v-card&gt;
  42.     &lt;/v-container&gt;

答案1

得分: 1

  1. 将属于顶部和底部的行分别包装在不同的div中，然后将父元素设置为flex列布局，并使用justify space-between。
  3. ```css
  4. .row-container {
  5.   height: calc(100vh - 48px);
  6.   display: flex;
  7.   flex-direction: column;
  8.   justify-content: space-between;
  9. }
英文:

Wrap the rows that belong at the top and at the bottom in different divs, then make the parent a flex column with justify space-between

  1. &lt;v-tab-item class=&quot;row-container&quot;&gt;
  2.   &lt;div class=&quot;top-rows&quot;&gt;
  3.     &lt;v-row style=&quot;border: 2px solid red&quot; no-gutters&gt;
  4.       &lt;v-col&gt; Lorem ipsum... &lt;/v-col&gt;
  5.     &lt;/v-row&gt;
  6.     &lt;v-row style=&quot;border: 2px solid purple&quot; no-gutters&gt;
  7.       &lt;v-col&gt; Lorem ipsum... &lt;/v-col&gt;
  8.     &lt;/v-row&gt;
  9.   &lt;/div&gt;
  11.   &lt;div class=&quot;bottom-rows&quot;&gt;
  12.     &lt;v-row style=&quot;border: 2px solid orange&quot; no-gutters&gt;
  13.       &lt;v-col&gt; Lorem ipsum... &lt;/v-col&gt;
  14.     &lt;/v-row&gt;
  15.   &lt;/div&gt;
  16. &lt;/v-tab-item&gt;
  1. .row-container {
  2.   height: calc(100vh - 48px);
  3.   display: flex;
  4.   flex-direction: column;
  5.   justify-content: space-between;
  6. }

codepen example

huangapple
  • 本文由 发表于 2023年5月11日 03:17:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76221898.html
  • css
  • vue.js
  • vuetify.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定