Bulma 中的大小和居中框元素答案

【问题标题】：Sizing and centering box element in BulmaBulma 中的大小和居中框元素
【发布时间】：2017-09-19 17:05:12
【问题描述】：

我有一个登录模式，其中有一个框，具有以下 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 }; 框大小会增加，但它不会自动居中 - 宽度只会添加到右侧。有什么办法可以改变盒子的大小，同时保持水平居中？

【问题讨论】：

标签： bulma

【解决方案1】：

您所要做的就是将盒子包裹在一个列中。并给出你需要的盒子大小的列。

<div className="column is-one-third">
      <div className="box">
      </div>
</div>

【讨论】：

【解决方案2】：

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

.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/

【讨论】：