Vuetify.js: 왼쪽과 오른쪽의 v-card에 버튼 액션을 배치하는 방법

Vuetify.js: 왼쪽과 오른쪽의 v-card에 버튼 액션을 배치하는 방법

인v-card-actions구성 요소v-card, 를 사용하여 왼쪽 버튼과 오른쪽에 다른 버튼을 배치하고 싶다.mr-0(오른쪽= 0). 단, 두 버튼은 항상 서로 가까이 있습니다.

내가 시도한 것:

• 소품left그리고.right단추에 대해서
• v-spacer버튼 사이의 컴포넌트

코드:

<v-card>
  <v-card-title primary-title>
    <div>
      <h3 class="headline mb-0">Ttile</h3>
      <div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>
    </div>
  </v-card-title>

  <v-card-actions>
    <v-btn left>Share</v-btn>
    <v-spacer />
    <v-btn right>Explore</v-btn>
  </v-card-actions>
</v-card>

코드펜

어떻게 해결할까요?

당신의 코드는 정확합니다.이것만 사용해 주세요.

      <v-card-actions>
        <v-btn>Share</v-btn>
        <v-spacer></v-spacer>
        <v-btn>Explore</v-btn>
      </v-card-actions>

그러니까 그냥 바꿔서v-spacer자기 인식 태그가 되지 않도록 해야 합니다.

그냥 싸면 돼v-flex추가하다text-xs-right두 번째 버튼을 오른쪽으로 당깁니다.

<v-card-actions>
    <v-flex>
      <v-btn>Share</v-btn>
    </v-flex>
    <v-flex class="text-xs-right">
      <v-btn>Explore</v-btn>
    </v-flex>
</v-card-actions>

코드펜

---

Vuetify 2.1.0 편집(@J 덕분).패스 해제):

그냥 싸면 돼v-col추가하다text-right두 번째 버튼을 오른쪽으로 당깁니다.

<v-card-actions>
    <v-col>
      <v-btn>Share</v-btn>
    </v-col>
    <v-col class="text-right">
      <v-btn>Explore</v-btn>
    </v-col>
</v-card-actions>

언급URL : https://stackoverflow.com/questions/53043799/vuetify-js-how-to-place-button-actions-in-v-card-on-left-and-right