Как удалить внутреннее пространство из v-btn в Vuetify.js?
Всем привет! [РЕШЕНО]
Я пытаюсь воссоздать страницу с помощью Vue.js и Vuetify, но не знаю, как с помощью кнопок получить следующий результат:
Это моя цель: https://i.imgur.com/CGkrz6R.png
Это то, что у меня есть сейчас: https://i.imgur.com/hKxkpOq.png
Как видите, мне просто нужно удалить КРАСНУЮ часть внутри кнопок, чтобы они оставались меньше и вместе, как показано ниже: https://i.imgur.com/Q6StwEE.png
Как я могу удалить это «внутреннее дополнение» из v-btn?
Это мой код:
<v-card>
<v-flex xs12>
<v-img src = "https://cdn.vuetifyjs.com/images/parallax/material2.jpg"/>
</v-flex>
<v-card-text>
{{ card.content }}
</v-card-text>
<v-card-actions>
<v-btn small outline color = "secondary" class = "ma-0 text-capitalize">View</v-btn>
<v-btn small outline color = "secondary" class = "ma-0 text-capitalize">Edit</v-btn>
</v-card-actions>
</v-card>
Спасибо!!
Это style = "min-width: 0" сработало просто отлично! Спасибо чувак!
Кстати, здесь практикуется писать ответ в разделе ответов, а не редактировать вопрос с решением. Вопрос должен только описывать проблему. Вы сами можете ответить на свой вопрос, в этом нет ничего плохого.
Ответы 2
Vue.directive('no-padding', {
bind: (el, bindings) {
el.style.padding = 0
}
})
<v-btn small no-padding outline color = "secondary" class = "ma-0 text-capitalize">View</v-btn>
Vuetify уже использует класс pa-0, нет необходимости в директиве. Этот подход кажется странным, но в любом случае проблема OP, похоже, связана с минимальной шириной. Смотрите мой комментарий к вопросу.
Спасибо за вашу помощь, мне просто нужно style = "min-width: 0" и теперь это сделано. Спасибо еще раз!
Решение проблемы
Как это сделать, благодаря Траксо. Достаточно создать следующий класс:
<style scoped>
.together{
min-width: 0
}
</style>
А затем используя его:
<v-btn small outline color = "secondary" class = "together ma-0 text-capitalize">Edit</v-btn>
вы удаляете заполнение с помощью
pa-0. Но похоже, что ваша проблема связана с пресетомmin-width, так что ставьтеmin-width: 0.