百捷伊可 - ebfcss

垂直居中对齐

添加.is-vcentered可以让列之间垂直居中对齐

    <div class="columns is-vcentered">
        <div class="column is-8">
            <p class="has-background-info">第一列</p>
        </div>
        <div class="column">
            <p class="has-background-primary">
                第二列内容多一点
                <br>
                然后可以看到第一列
                <br>
                相对于第二列是垂直居中对齐的效果
            </p>
        </div>
    </div>

第一列

第二列内容多一点
然后可以看到第一列
相对于第二列是垂直居中对齐的效果

多行

网格将屏幕分成了12等分，如果列所占等分超过了12等分，则可以用多个网格来实现，或者给网格添加.is-multiline类来让列自动折到下一行。

    <div class="columns is-multiline is-mobile">
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column is-half">
            <code>is-half</code>
        </div>
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column is-one-quarter">
            <code>is-one-quarter</code>
        </div>
        <div class="column">
            自动
        </div>
    </div>

is-one-quarter

is-half

is-one-quarter

自动

水平居中

如果想让一个列水平居中，可以在他左右两边添加空的列，另一个办法是添加.is-centered类

    <div class="columns is-mobile is-centered">
        <div class="column is-half">
            <p class="has-background-primary">
                <code class="html">is-half</code><br>
            </p>
        </div>
    </div>

is-half

配合.is-multiline类，可以实现灵活的多列居中效果

    <div class="columns is-mobile is-multiline is-centered">
        <div class="column is-narrow">
            <p class="bd-notification is-primary">
                <code class="html">is-narrow</code><br>
                第一列
            </p>
        </div>
        <div class="column is-narrow">
            <p class="bd-notification is-primary">
                <code class="html">is-narrow</code><br>
                第二列
            </p>
        </div>
        <div class="column is-narrow">
            <p class="bd-notification is-primary">
                <code class="html">is-narrow</code><br>
                第三列
            </p>
        </div>
        <div class="column is-narrow">
            <p class="bd-notification is-primary">
                <code class="html">is-narrow</code><br>
                第四列
            </p>
        </div>
        <div class="column is-narrow">
            <p class="bd-notification is-primary">
                <code class="html">is-narrow</code><br>
                第五列
            </p>
        </div>
    </div>

is-narrow
第一列

is-narrow
第二列

is-narrow
第三列

is-narrow
第四列

is-narrow
第五列

产品中心

用户中心

联系我们

关注百捷网络