html - 使用 Bulma CSS 将卡片居中

Question

我目前正在为 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>

任何帮助、提示、建议等。将不胜感激!

Answer 1

您可以使用列类来实现您想要的

 <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

如果不想使用偏移类。