Grids#

简介#

Grids 基于 12 列系统，可以适应观看屏幕的大小。

可以使用默认列数（1 到 12）设置 grid 指令；可以为所有屏幕尺寸设置一个数字，或者为超小 (<576px)、小 (768px)、中 (992px) 和大屏幕 (>1200px) 设置四个数字，然后应为每个项目设置子 grid-item 指令。

尝试调整屏幕大小以查看列数的变化

A

B

C

D

语法
::::{grid} 1 2 3 4
:outline:

:::{grid-item}
A
:::
:::{grid-item}
B
:::
:::{grid-item}
C
:::
:::{grid-item}
D
:::
::::

.. grid:: 1 2 3 4
    :outline:

    .. grid-item::

        A

    .. grid-item::

        B

    .. grid-item::

        C

    .. grid-item::

        D

您还可以对列宽度使用 auto 值，以根据其内容的自然宽度调整列的大小。

short text content

some longer text content

short text content

在网格中放置卡片#

grid-item-card 指令是在网格项内放置卡片内容容器的简写方式（请参阅 Cards）。 大多数 card 指令的选项也可用在此处

标题 1

A

标题 2

B

语法
::::{grid} 2
:::{grid-item-card}  Title 1
A
:::
:::{grid-item-card}  Title 2
B
:::
::::

.. grid:: 2

    .. grid-item-card::  Title 1

        A

    .. grid-item-card::  Title 2

        B

控制项目之间的间距#

您可以使用 gutter 选项设置网格项目之间的间距。 与网格列一样，您可以提供一个数字，也可以为小、中、大和超大屏幕提供四个数字。

A

B

A

B

语法
::::{grid} 2
:gutter: 1

:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::

::::{grid} 2
:gutter: 3 3 4 5

:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::

.. grid:: 2
    :gutter: 1

    .. grid-item-card::

        A

    .. grid-item-card::

        B

.. grid:: 2
    :gutter: 3 3 4 5

    .. grid-item-card::

        A

    .. grid-item-card::

        B

项目级别列宽#

您可以使用 grid-item 指令的 columns 选项覆盖单个项目占用的列数。 假设总列数为 12，这意味着 12 表示单个项目占用整个网格行，或 6 个半行。 或者，使用 auto 根据项目内容自动决定要使用的列数。 与网格列一样，您可以提供一个数字，也可以为小、中、大和超大屏幕提供四个数字。

A

B

C

语法
::::{grid} 2
:::{grid-item-card}
:columns: auto

A
:::
:::{grid-item-card}
:columns: 12 6 6 6

B
:::
:::{grid-item-card}
:columns: 12

C
:::
::::

.. grid:: 2

    .. grid-item-card::
        :columns: auto

        A

    .. grid-item-card::
        :columns: 12 6 6 6

        B

    .. grid-item-card::
        :columns: 12

        C

反转项目顺序#

使用 grid 指令的 reverse 选项反转项目的顺序。 如果您希望项目在大屏幕上位于右侧，但在小屏幕上位于顶部，这将非常有用。

_images/ebp-logo.png

一些文本

嵌套网格#

网格可以嵌套在其他网格中，以创建复杂的自适应布局

项目 1.1

多行

内容

项目 1.2

内容

项目 2.1

内容

项目 2.2

内容

项目 2.3

内容

语法
::::::{grid} 1 1 2 2
:gutter: 1

:::::{grid-item}

::::{grid} 1 1 1 1
:gutter: 1

:::{grid-item-card} Item 1.1

Multi-line

content

:::

:::{grid-item-card} Item 1.2

Content

:::

::::

:::::

:::::{grid-item}

::::{grid} 1 1 1 1
:gutter: 1

:::{grid-item-card} Item 2.1

Content

:::

:::{grid-item-card} Item 2.2

Content

:::

:::{grid-item-card} Item 2.3

Content

:::

::::

:::::

::::::

.. grid:: 1 1 2 2
    :gutter: 1

    .. grid-item::

        .. grid:: 1 1 1 1
            :gutter: 1

            .. grid-item-card:: Item 1.1

                Multi-line

                content

            .. grid-item-card:: Item 1.2

                Content

    .. grid-item::

        .. grid:: 1 1 1 1
            :gutter: 1

            .. grid-item-card:: Item 2.1

                Content

            .. grid-item-card:: Item 2.2

                Content

            .. grid-item-card:: Item 2.3

                Content

有关更多详细信息，请参阅 Bootstrap Grid 系统。

grid 选项#

gutter

项目之间的间距。 一个或四个整数（用于“xs sm md lg”），介于 0 和 5 之间。

margin

网格的外边距。 一个（全部）或四个（上、下、左、右）值，取值范围为：0、1、2、3、4、5、auto。

padding

网格的内边距。 一个（全部）或四个（上、下、左、右）值，取值范围为：0、1、2、3、4、5。

outline

在网格周围创建边框。

reverse

反转网格项目的顺序。

class-container

网格容器元素的其他 CSS 类。

class-row

网格行元素的其他 CSS 类。

grid-item 选项#

columns

grid-item 将占用的列数（总共 12 列）。 一个或四个整数（用于“xs sm md lg”），介于 1 和 12 之间（或 auto 以适应内容）。

margin

网格项的外边距。 一个（全部）或四个（上、下、左、右）值，取值范围为：0、1、2、3、4、5、auto。

padding

网格项的内边距。 一个（全部）或四个（上、下、左、右）值，取值范围为：0、1、2、3、4、5。

child-direction

网格项中子项的方向：column（默认）或 row。

child-align

子项的对齐方式，沿 child-direction：start（默认）、end、center、justify 或 spaced。

outline

在网格项周围创建边框。

class

网格项元素的其他 CSS 类。

grid-item-card 选项#

columns

grid-item 将占用的列数（总共 12 列）。 一个或四个整数（用于“xs sm md lg”），介于 1 和 12 之间（或 auto 以适应内容）。

margin

网格项的外边距。 一个（全部）或四个（上、下、左、右）值，取值范围为：0、1、2、3、4、5、auto。

padding

网格项的内边距。 一个（全部）或四个（上、下、左、右）值，取值范围为：0、1、2、3、4、5。

class-item

网格项元素的其他 CSS 类。

加上来自 卡片选项 的所有选项。

本页内容
显示源代码