実現したいこと
b-toast にCSSを適用してtoastのwidthとheightを変更して大きく表示したい
該当のソースコード
<template> <div class="p-3 bg-secondary progress-bar-striped" style="min-height: 170px;"> <b-button class="mb-2" variant="primary" @click="$bvToast.show('example-toast')"> Show toast </b-button> <b-toast id="example-toast" title="BootstrapVue" static no-auto-hide> Hello, world! This is a toast message. </b-toast> </div> </template>``` <style lang="scss" scoped> .sample{ width: 30vw; max-width: 296px; } </style>
ヘディングのテキスト
https://bootstrap-vue.org/docs/components/toast#overview
上記コードはBootstrapVueの公式ページからの引用なのですが、<b-toast>タグで表示されるtoastに対してclassを付与してwidth,height等を指定しても変更されません。
Propertiesにtoast-class="sample"でも適用されませんでした。
b-toast にCSSを適用する方法を教えて頂けないでしょうか。
あなたの回答
tips
プレビュー