使用 Bulma CSS 居中卡片

Question

我目前正在为番茄钟定时器构建一个应用程序，我正在使用 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

如果您不想使用 offset 类，可以使用 columns 容器包装 card div 并使用 is-half 类。