如何将此 Vuetify (bootstrap) v-col 与其父行的底部对齐？答案

【问题标题】：How to align this Vuetify (bootstrap) v-col to the bottom of its parent row?如何将此 Vuetify (bootstrap) v-col 与其父行的底部对齐？
【发布时间】：2021-06-28 20:24:13
【问题描述】：

我已经尝试了所有我能想到的方法，但我无法让“阅读更多”超链接位于父行的底部，因此“阅读更多”位于容器的右下角。 justify 或 align 的组合似乎无济于事。

文章图片应该位于左侧，然后文章标题位于图片的右侧，整个面板的右下角有“阅读更多”。我想最简单的方法是让超链接的列与 v 行的底部对齐，然后使用 text-right 进行格式化。

  <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>      
    <v-col>
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row>
        <v-col class='text-center'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

最终解决方案，包括两个阅读部分：

<template>
<v-container fluid class='content-body'>
  <v-row>
    <v-col cols="12">
      <h1 class="ml-2" style="display: inline">{{ item.title }}</h1>
      <span style="font-size: x-small">{{ item.date }}</span>
    </v-col>
    <v-col style='padding: 0; margin-top: -15px; margin-bottom: -15px' cols="12">
      <hr />
    </v-col>
    <v-row v-if='!readMore' class='mb-1 pr-1 pl-1'>
      <v-col md="4" class="text-center">
    <v-img class="ml-1 mr-1 mb-1 article-image" :src="item.image"/>
      </v-col>
      <v-col md="8">
    <v-row class="fill-height" dense>
      <v-col cols="12" class='mb-2 ml-1 mr-1'>
            <h3>{{ item.header }}</h3>
      </v-col>
      <v-col cols="12" class="text-right pb-0 mb-0" align-self="end">
            <v-btn color='#0a0a0a' class='blue--text mr-0' v-on:click="showMore">Read More</v-btn>
      </v-col>
    </v-row>
      </v-col>
    </v-row>    
    <v-row v-else class='mb-1 pr-1 pl-1'>
      <v-col cols='12'>
    <nuxt-content :document='item'/>
      </v-col>
      <v-col cols="12" class="text-right" align-self="end">
        <v-btn color='#0a0a0a' class='blue--text mr-0' v-on:click="showLess">Read Less</v-btn>
      </v-col>
    </v-row>
  </v-row>
</v-container>
</template>

【问题讨论】：

标签： vuetify.js css-grid nuxtjs

【解决方案1】：

您需要使用 <v-col align-self="end"> 属性来对齐 y 轴。
我修复了你的代码。这是代码sn-p。

<v-row>
  <v-col cols="12">
    <h1 class="ml-2" style="display: inline">{{ article.title }}</h1>
    <span style="font-size: x-small">{{ article.month }}.{{ article.day }}.{{ article.year }}</span>
  </v-col>
  <v-col
    cols="12"
    ><hr />
  </v-col>
  
  <v-col md="4" class="text-center">
    <v-img class="ml-2 mb-3" :src="article.image" height="200px"/>
  </v-col>
  
  <v-col md="8" class="text-center">
    <v-row class="fill-height mr-2" dense>
      <v-col cols="12">
        <p>{{ article.header }}</p>
      </v-col>
  
      <v-col cols="12" class="text-right" align-self="end">
        <a>>>>Read More<<<</a>
      </v-col>
    </v-row>
  </v-col>
</v-row>

您可以在CodePen 中看到完整的代码。结果如下图。

【讨论】：

这很好用，谢谢。但是有没有办法让阅读更多链接与文章图像的底部对齐（对于全尺寸页面）而不是出现在它下方的一行上？
你需要设置v-img的高度并使用v-row关于dense的属性。我更新了答案和 CodePen。
成功了。我会在 9 小时后在问题和奖励中发布最终代码。
你是国王。

【解决方案2】：

试试这个：

 <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>
    <v-col class="d-flex">
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row class="align-self-end">
        <v-col class='text-end'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

【讨论】：