2

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

4

2 回答 2

4

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

<div className="column is-one-third">
      <div className="box">
      </div>
</div>
于 2019-03-29T23:31:42.297 回答
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/

于 2018-09-05T16:43:52.057 回答