如何将此 Vuetify (bootstrap) v-col 对齐到其 parent 行的底部？

Question

我已经尝试了所有我能想到的方法，但我无法让“阅读更多”超链接位于 parent 行的底部，因此 'Read More' 位于 bottom-right 的容器。 justify 或 align 的组合似乎没有帮助。

文章图片应该位于左侧，然后文章 header 位于图片右侧，整个面板右下角有“阅读更多”。我想最简单的方法是让超链接的列与 v-row 的底部对齐，然后只使用 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>

Answer 1

试试这个：

 <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>

Answer 2

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

<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 中看到完整的代码。结果如下图

如何将此 Vuetify (bootstrap) v-col 对齐到其 parent 行的底部？

How to align this Vuetify (bootstrap) v-col to the bottom of its parent row?

css-grid

vuetify.js

nuxtjs