Question

我之前从未使用过CSS框架，所以如果这是一个奇怪的问题，我很抱歉。

我有一个登录模式，其中我有一个框，具有以下CSS结构：

<div class="modal" v-bind:class="{ 'is-active': isActive }">
    <div class="modal-background">
    </div>
    <div class="modal-content">
        <div class="box">
            // content 
            // content 
            // content 
        </div>
    </div>
</div>

事情是，我想将盒子的大小改为一定的宽度。如果我设置例如.box { width: 600px };框大小增加，但它不会自动居中 - 宽度只会添加到右侧。有什么办法可以改变盒子大小，同时保持水平居中吗？

谢谢！

Answer 1

我还没有遇到任何这样做的形式。解决此问题的另一种方法是使用列。

.columns
    .column.is-one-quarter
        .box One quarter
    .column.is-one-quarter 
        .box One quarter This box would have a reduced size, for it is contained in 1 quarter
    .column.is-one-quarter 
        .box One quarter

签出此链接https://bulma.io/documentation/columns/sizes/

Answer 2

所有您需要做的就是将方框包装在列中。并提供您需要框大小的列。

{{1}}

Bulma中的大小和居中框元素

2 个答案: