我有一个 Vuetify 数据表，分别带有标题和数据字段，在 props.item.name 我添加了一个 v 图标，但我只想在我将鼠标悬停在相应字段上时显示该图标。默认情况下它不应该出现。
我已经添加了下面的代码和脚本和 HTML。
这是一支笔
关于如何实现这一目标的任何帮助将不胜感激。
new Vue({
el: '#app',
data() {
return {
headers: [{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{
text: 'Calories',
value: 'calories'
},
{
text: 'Fat (g)',
value: 'fat'
},
{
text: 'Carbs (g)',
value: 'carbs'
},
{
text: 'Protein (g)',
value: 'protein'
},
{
text: 'Iron (%)',
value: 'iron'
}
],
desserts: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: …我正在使用 react boostrap 模态并尝试将其均匀地居中放置，目前我正在指定width模态的 ，然后在似乎有效的modal-dialog类上设置 margin-left 285px !important。但是当屏幕尺寸低于xl尺寸时，我该如何做到这一点，边距应该是100px.
这是codepen的链接。
我的 CSS 看起来像这样：-
.modal-content {
width: 1200px
}
.modal-dialog {
margin-left: 285px !important
}
@media screen and (max-width: 1000px) {
.modal-dialog {
margin-left: 100px !important
}
}
显然，媒体查询似乎不起作用。或者有没有办法将模态设置为始终居中，而不管屏幕尺寸如何？