В компоненте v-card-actions
v-card
я хочу разместить одну кнопку слева, а другую справа, используя mr-0
(margin-right = 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
так, чтобы он не был самозакрывающимся тегом.
У меня работает странная самозакрывающаяся нотация (с использованием Vueitfy 2.4.0).
@Haltarys странно. См. Этот CodePen ⇾ codepen.io/Roland1993/pen/qBmZKJP?editors=1011, где он не работает даже в 2.4.0.
Просто оберните их в 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. Unkrass):
Просто оберните их в 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>
Я использую Vuetify 2.1.0, и после одного из последних обновлений text-xs-right
теперь должен быть text-right
, так как xs больше не нужно указывать. Если вы хотите начать использовать это при ширине sm, вы можете использовать text-sm-right
и выше. Надеюсь, это кому-то поможет, так как я боролся с этим сначала после обновления.
Также я думаю, что <v-flex>
теперь должен быть <v-col>
, но <v-flex>
по-прежнему работает нормально.
Что странно, мне показалось, что
v-spacer
- это самозакрывающийся компонент. Спасибо