Vue.js + Vuetify + Firebase Project - DevMeetup 을 하고 있을 때 수수하게 막혔으므로 메모합니다.

하고 싶은 일

「EXPLOR MEETUPS」버튼(빨강)과 「ORGANIZE MEETUP」버튼(파랑)의 배치를, 브라우저 화면일 때나 스마트폰 화면일 때도 중앙 맞추고 싶다.

아무것도 지정하지 않음

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col>
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

「EXPLOR MEETUPS」버튼을 오른쪽으로 올리면 좋을 것 같다.

align 지정

<template>
  <v-container>
    <v-row>
      <!-- alignを指定 -->
      <v-col align="right"> 
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col>
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

브라우저는 잘 되었지만, 스마트폰이 무너져 버렸다.

align, breakpoint 지정

<template>
  <v-container>
    <v-row>
      <!-- align, breakpointを指定 -->
      <v-col align="$vuetify.breakpoint.xs ? 'center' : 'right'"> 
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col>
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

원래 작동하지 않았다.

text-{breakpoint}-{value} 지정

<template>
  <v-container>
    <v-row>
      <v-col class="text-center text-sm-right">
        <v-btn large router to="/meetups" class="primary">Explore Meetups</v-btn>
      </v-col>
      <v-col class="text-center text-sm-left">
        <v-btn large router to="/meetup/new" class="info">Organize Meetup</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

할 수 있었습니다.

주의점으로서,

These classes can be applied to all breakpoints from xs to xl. When using a base class,.text-{value}, it is inferred to be .text-xs-${value}.

그렇다고, text-xs-center 라고 하면 기능하지 않았습니다.

공식을 보면, 아무래도 문자 때만 사용하는 분위기가 나왔기 때문에 막혔습니다.
다른 좋은 방법이 있다면 알려주세요.