时间戳

首页 > 解决方案 > 使用 Bulma CSS 居中卡片

html - 使用 Bulma CSS 居中卡片

问题描述

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

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

标签： htmlcssresponsive-designflexboxbulma

解决方案

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

 <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

如果您不想使用偏移类，可以使用容器包装carddiv并使用该类。columnsis-half

推荐阅读