为什么我不能在boostrap中设置procent值
我想用（薄棒）制作一个酒吧，但是当我使用bootstrap时，我无法完全控制尺寸。
<template>
<div class="container-fluid mx-auto">
<div class="row">
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
</div>
</div>
</template>
<script>
export default {
setup() {},
};
</script>
<style scoped>
.container-fluid {
border: 3px solid black;
width: 100%;
height: 20%;
}
.row {
display: flex;
justify-content: space-evenly;
align-items: center !important;
}
.square {
width: 10vw;
height: 3vh;
background-color: red;
}
</style>
我想将.container-fluid高度设置为50％，但我不能，我想设置.square width and Heightth in％，而我不能，我不能，并且无法设置所有项目都不想对齐中心。 如何描述％和对齐项目中心的尺寸？
I want to make a bar with (thin bar) but as I am using bootstrap, I can't fully control sizes;
<template>
<div class="container-fluid mx-auto">
<div class="row">
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
<div class="square rounded-pill"></div>
</div>
</div>
</template>
<script>
export default {
setup() {},
};
</script>
<style scoped>
.container-fluid {
border: 3px solid black;
width: 100%;
height: 20%;
}
.row {
display: flex;
justify-content: space-evenly;
align-items: center !important;
}
.square {
width: 10vw;
height: 3vh;
background-color: red;
}
</style>
I want to set the .container-fluid height to 50% but I cant, I want to set .square width and height in % and I can't, and above all the items dont want to align center, in .row justifycontent works, but align items: center don`t?
How can I describe the sizes in % and align items center?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我建议您在基于视口单元中的任何Bootstrap元素的 width 高度。这些是
vh，vw，vmin和vmax。百分比无法按照您想要使用它们的方式工作。例如，1VH的值等于1％。请参阅下面的摘要。对于
Align-Items部分，您要实现什么？您想垂直对齐什么？I suggest you to set the
widthandheightof any Bootstrap element in viewport-based units. These arevh,vw,vminandvmax. Percentages doesn't work the way you want to use them. For example, a value of1vhis equal to1%of the viewport height. See the snippet below.For the
align-itemspart, what are you trying to achieve? What do you want to align vertically?