我目前正在为 Pomodoro Timer 构建一个应用程序,我正在使用 Bulma 作为 CSS 框架,到目前为止我很喜欢它,我仍在学习 Flexbox 的工作原理,我想知道什么会是解决这种情况的最佳方法,如果只使用 Bulma 类就可以完成,或者我是否必须创建自己的类。
我正在尝试为每个添加的任务创建“卡片”,但我希望它们的宽度只有全屏宽度的一半或更小。我不明白如何使用 Bulma 实现这一点,因为所有内容都占据了整个宽度,而且我不能将所有内容居中,因为它没有硬编码的宽度。这是包含任务卡的部分的代码。
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
任何帮助、提示、建议等。将不胜感激!
最佳答案
您可以使用列类来实现您想要的
<div class="task-container columns is-multiline">
<div class="card column is-half is-offset-one-quarter">
// statements
</div>
</div>
这是官方文档的链接:https://bulma.io/documentation/columns/options/#centering-columns
如果不想使用偏移类。
关于html - 使用 Bulma CSS 将卡片居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52049767/