Центрирование карт с помощью Bulma CSS - PullRequest
Новая
       76

Центрирование карт с помощью Bulma CSS

0 голосов
/ 28 августа 2018

Я сейчас создаю приложение для Pomodoro Timer, я использую Bulma в качестве CSS Framework, и пока мне это нравится, я все еще изучаю, как работает Flexbox, я хотел бы знать, что бы быть лучшим подходом к этой ситуации, и если это можно сделать, используя только классы Bulma, или если мне придется создавать свои собственные.

enter image description here

Я пытаюсь создать «карточки» для каждой добавленной задачи, но я хочу, чтобы они составляли примерно половину или меньше полной ширины экрана. Я не понимаю, как это сделать с помощью 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>

Любая помощь, советы, предложения и т. Д. Будет принята с благодарностью!.

1 Ответ

0 голосов
/ 28 августа 2018

Вы можете использовать классы столбцов для достижения того, что вы хотите 

 <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

Вы можете обернуть card div контейнером columns и использовать класс is-half, если не хотите использовать класс смещения.

...