正如你可以看到的图像没有列和行对齐，都是不同的大小。我很新的javascript和vue，并会非常感谢的帮助。从我的理解在互联网上的v行是应该自动使行以及v列根据数量的元素在v列然而它是不工作。我一定是做错了什么？
<template>
<div class="calculator">
<v-container>
<v-layout row >
<div class="display">10</div>
<v-col>
<v-btn class = "btn">c</v-btn>
<v-btn class = "btn">+/-</v-btn>
<v-btn class = "btn">%</v-btn>
<v-btn class = "operator">÷</v-btn>
</v-col>
<v-col>
<div></div>
<v-btn class = "btn">7</v-btn>
<v-btn class = "btn">8</v-btn>
<v-btn class = "btn">9</v-btn>
<v-btn class = "operator">x</v-btn>
</v-col>
<v-col>
<div></div>
<v-btn class = "btn">4</v-btn>
<v-btn class = "btn">5</v-btn>
<v-btn class = "btn">6</v-btn>
<v-btn class = "operator">-</v-btn>
</v-col>
<v-col>
<div></div>
<v-btn class = "btn">1</v-btn>
<v-btn class = "btn">2</v-btn>
<v-btn class = "btn">3</v-btn>
<v-btn class = "operator">+</v-btn>
</v-col>
<v-col>
<div></div>
<v-btn class = "btn zero">0</v-btn>
<v-btn class = "btn">.</v-btn>
<v-btn class = "operator">=</v-btn>
</v-col>
</v-layout>
</v-container>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
.calculator {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: minmax(50px,auto);
}
.display {
background-color:black;
grid-column: 1 / 5 ;
}
.zero {
grid-column: 1 / 3;
}
.btn {
font-size: large;
color:black;
background-color: rgb(236, 232, 232);
border: 1px sold black;
}
.operator {
font-size: large;
background-color: orange;
border: 1px sold black;
}
</style>
2条答案
按热度按时间hlswsv351#
我会尝试以下格式：
ws51t4hk2#
请确保您的应用 Package 在
v-app组件内，并且您的根元素具有id app。这通常是样式不起作用的一个原因。如果您提供的代码在
App.vue中，请尝试以下操作-如果此代码位于任何子组件中，请确保正确 Package 了
App.vue。应用程序版本
提示：-
如果这样做的话，你就不再需要自定义样式来以网格格式排列你的元素了。Vuetify将使用行和列来处理这个问题。
编辑-
使用
v-flex而不是v-col，因为您使用的是Vuetify的第一个版本。