2.2 列布局基础

1、使用 Bulma 创建一个 列布局是非常简单的:


添加一个 columns 容器

根据你的需要在其中添加多个 column 元素

无论有多少列,他们的宽度将会 均分.


First column

Second column

Third column

Fourth column

<div class="columns">
    <div class="column">
        <p class="bd-notification is-primary">
            First column
        </p>
    </div>
    <div class="column">
        <p class="bd-notification is-primary">
            Second column
        </p>
    </div>
    <div class="column">
        <p class="bd-notification is-primary">
            Third column
        </p>
    </div>
    <div class="column">
        <p class="bd-notification is-primary">
            Fourth column
        </p>
    </div>
</div>

 


2、定义列的尺寸

关于列的尺寸,有两种定义方法,分数法和12栅格法,建议使用12栅格法,这样和bootstrap好统一,也更容易记忆,毕竟我们记英语单词的水平都不高。

12栅格法就是把整个屏幕的宽度分为12等份,你想要某个列占2等份,就用is-2修饰,非常容易理解。


is-1

其余内容

is-2

其余内容

is-3

其余内容

is-4

其余内容

is-5

其余内容

is-6

其余内容

is-7

其余内容

is-8

其余内容

is-9

其余内容

is-10

其余内容

is-11

其余内容

is-12

其余内容


<div class="columns">
        <div class="column is-1">
            <p class="bd-notification is-primary">
                <code>is-1</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-2">
            <p class="bd-notification is-primary">
                <code>is-2</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-3">
            <p class="bd-notification is-primary">
                <code>is-3</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-4">
            <p class="bd-notification is-primary">
                <code>is-4</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-5">
            <p class="bd-notification is-primary">
                <code>is-5</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-6">
            <p class="bd-notification is-primary">
                <code>is-6</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-7">
            <p class="bd-notification is-primary">
                <code>is-7</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-8">
            <p class="bd-notification is-primary">
                <code>is-8</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-9">
            <p class="bd-notification is-primary">
                <code>is-9</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-10">
            <p class="bd-notification is-primary">
                <code>is-10</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-11">
            <p class="bd-notification is-primary">
                <code>is-11</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>
<div class="columns">
        <div class="column is-12">
            <p class="bd-notification is-primary">
                <code>is-12</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>

3、偏移

为了调整元素位置,你可以使用is-offset-x 来达到向右偏移x个栅格的目的


is-4 is-offset-4

其余内容


<div class="columns">
        <div class="column is-4 is-offset-4">
            <p class="bd-notification is-primary">
                <code>is-4 is-offset-4</code>
            </p>
        </div>
        <div class="column">
            <p class="bd-notification is-fojeisj has-text-centered">
                其余内容
            </p>
        </div>
</div>


4、窄列

这个在左右布局中经常出现


Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

<div class="columns">
  <div class="column is-narrow">
    <div class="box" style="width: 200px;">
      <p class="title is-5">Narrow column</p>
      <p class="subtitle">This column is only 200px wide.</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p class="title is-5">Flexible column</p>
      <p class="subtitle">This column will take up the remaining space available.</p>
    </div>
  </div>
</div>







返回头部

问题反馈
返回顶部