以 Bulma 为中心的卡片 CSS

Question

我目前正在为番茄钟构建一个应用程序，我将 Bulma 用作 CSS 框架，到目前为止我很喜欢它，我仍在学习 Flexbox 的工作原理，我想知道什么是解决这种情况的最佳方法，是否可以仅使用 Bulma 类或者我是否必须创建自己的方法。

我正在尝试为每个添加的任务创建 "cards"，但我希望它们的大小仅为全屏宽度的一半或更小。我不明白如何使用 Bulma 实现这一点，因为所有内容都占据了整个宽度，而且我不能将所有内容居中，因为它没有 hard-coded 宽度。这是包含任务卡的部分的代码。

 <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

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

 <div class="task-container columns is-multiline">
        <div class="card column is-half is-offset-one-quarter">
            // statements
        </div>
    </div>

这里是官方文档的link：https://bulma.io/documentation/columns/options/#centering-columns

你可以用 columns 容器包装 card div，如果你不想使用偏移量，则使用 is-half class class.

以 Bulma 为中心的卡片 CSS

Centering Cards with Bulma CSS

html

css

flexbox

responsive-design

bulma