布局和网格系统

利用功能强大的移动优先 flexbox 网格（通过 <b-container>、<b-row>、<b-form-row> 和 <b-col> 组件）构建各种形状和大小的布局，这要归功于十二列系统、五个默认响应层级、CSS Sass 变量和混合，以及数十个预定义的类。

BootstrapVue 提供了几个针对布局量身定制的便捷功能组件，与传统的 Bootstrap v4 标记相比，它们可以简化复杂的页面标记。随时在传统的 Bootstrap v4 标记（即 <div> 和类）和 BootstrapVue 的便捷功能布局组件之间切换。

工作原理

Bootstrap 网格系统使用一系列容器、行和列来布局和对齐内容。它使用 flexbox 构建，并且完全响应式。下面是一个示例，以及对网格如何组合在一起的深入了解。

<b-container class="bv-example-row">
  <b-row>
    <b-col>1 of 3</b-col>
    <b-col>2 of 3</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-how-it-works.vue -->

上面的示例使用 Bootstrap v4 的预定义网格类，在小型、中型、大型和超大型设备上创建了三个等宽列。这些列使用父级 .container 居中显示在页面中。

分解一下，它的工作原理如下

容器提供了一种方法来使网站内容居中并水平填充。对于响应式像素宽度，使用 <b-container>，对于所有视口和设备大小的 width: 100%，使用 <b-container fluid>。
行是列的包装器。每个列都有用于控制它们之间的空间的水平 padding（称为间距）。然后，使用负边距在行上抵消此 padding。这样，列中的所有内容在视觉上都沿左侧对齐。
在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。
借助 flexbox，没有设置宽度的网格列将自动以相等的宽度布局。例如，四个 <b-col sm="auto"> 实例在小型断点处每个自动为 25% 的宽度。
列属性 cols 表示您希望在每行中使用多少列（12 列），无论断点如何（从断点 xs 开始）。因此，如果您希望在任何断点处都有三个等宽列，则可以使用 <b-col cols="4">。
列属性 sm、md、lg、xl 表示您希望在每行中使用多少列（12 列），在不同的断点处。因此，如果您希望在断点 sm 处有三个等宽列，则可以使用 <b-col sm="4">。特殊值 auto 可用于占用一行中剩余的可用列空间。
列 width 以百分比设置，因此它们始终是流动的，并且相对于其父元素的大小而定。
列具有水平 padding 以创建各个列之间的间距，但是，您可以通过在 <b-row> 上设置 no-gutters 属性，从 <b-row> 中移除 margin，从 <b-col> 中移除 padding。
为了使网格具有响应性，有五个网格断点，每个响应断点一个：所有断点（超小）、小、中、大、超大。
网格断点基于最小宽度媒体查询，这意味着它们适用于该断点以及该断点以上的所有断点（例如，<b-col sm="4"> 适用于小型、中型、大型和超大型设备，但不适用于第一个 xs 断点）。
您可以使用预定义的网格类或 Sass mixin 来获得更语义化的标记。

请注意 flexbox 的限制和 bug，例如无法将某些 HTML 元素用作 flex 容器。

容器 `<b-container>`

容器 (<b-container>) 是 Bootstrap 中最基本的布局元素。默认情况下，从响应式、固定宽度容器（意味着其 max-width 在每个断点处发生变化）中进行选择，或通过设置“fluid”属性来选择流体宽度（意味着它始终为 100% 宽度），或选择响应式容器，其中容器在达到特定断点之前是流体的（需要 Bootstrap CSS v4.4+）。

虽然可以嵌套容器，但大多数布局不需要嵌套容器。

可以使用 Bootstrap V4.x SCSS 变量来配置默认断点宽度。有关其他详细信息，请参阅主题参考页面，以及以下网格选项部分中的表格。

默认容器

默认 <b-container> 是响应式、固定宽度容器，这意味着其 max-width 在每个视口宽度断点处发生变化。

<b-container>
  <!-- Content here -->
</b-container>

流体宽度容器

在 <b-container> 上使用 fluid 属性将呈现一个始终为 100% 宽度的容器，无论视口断点如何。

<b-container fluid>
  <!-- Content here -->
</b-container>

将 fluid 属性设置为 true（或空字符串）等效于 Bootstrap .container-fluid 类。

响应式流体容器

需要 Bootstrap v4.4+ CSS

响应式容器在 Bootstrap v4.4 中是新的。它们允许您指定一个 100% 宽度（流体）的容器，直到达到特定断点，此时将应用 max-width。例如，将属性 fluid 设置为 'md' 将呈现一个 100% 宽度的容器，直到达到 'md' 断点，此时它将变为标准非流体容器。

<b-container fluid="sm">
  100% wide until small breakpoint
</b-container>
<b-container fluid="md">
  100% wide until medium breakpoint
</b-container>
<b-container fluid="lg">
  100% wide until large breakpoint
</b-container>
<b-container fluid="xl">
  100% wide until extra large breakpoint
</b-container>

将 fluid 属性设置为断点名称将转换为 Bootstrap 类 .container-{breakpoint}。

有关默认容器宽度值，请参阅下表中的网格选项部分表格。

行 `<b-row>` 和 `<b-form-row>`

行是列的包装器。每列都有水平填充（称为间隙），用于控制它们之间的空间。然后在行上使用负边距来抵消此填充。这样，列中的所有内容在视觉上都沿左侧对齐。

您可以通过在 <b-row> 上设置 no-gutters 属性来移除 <b-row> 中的边距和 <b-col> 中的填充。

或者，对于紧凑的边距（列之间的间隙较小），请使用 <b-form-row> 组件，该组件通常在布局表单时使用。

列 `<b-col>`

<b-col> 必须放置在 <b-row> 组件或应用了类 row 的元素（例如 <div>）中，或者 - 在表单的情况下 - 在 <b-form-row> 组件中（以获取具有更紧凑边距的列）。

网格选项

虽然 Bootstrap 使用 em 或 rem 单位来定义大多数大小，但 px 用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不会随字体大小而改变。

通过一张方便的表格了解 Bootstrap 网格系统如何在多个设备上发挥作用。

	特小 (xs) `<576px`	小 (sm) `≥576px`	中 (md) `≥768px`	大 (lg) `≥992px`	特大 (xl) `≥1200px`
最大容器宽度	无（自动）	540px	720px	960px	1140px
属性	`cols="*"`	`sm="*"`	`md="*"`	`lg="*"`	`xl="*"`
列数	12
间距宽度	30px（每列两侧 15px）
可嵌套	是
偏移	`offset="*"`	`offset-sm="*"`	`offset-md="*"`	`offset-lg="*"`	`offset-xl="*"`
顺序	`order="*"`	`order-sm="*"`	`order-md="*"`	`order-lg="*"`	`order-xl="*"`

备注

没有 xs 属性。 cols 属性指的是 xs（最小）断点。
上述断点值和名称是 Bootstrap 的默认值。它们可以通过 SCSS 变量进行自定义，如果同时使用自定义断点名称，则可以通过 BootstrapVue 全局配置进行自定义。

容器大小

下表概述了在不同断点处的默认容器最大宽度。如果您使用的是自定义主题的 Bootstrap v4 SCSS/CSS，这些值可能会有所不同。

容器类型	特小 `<576px`	小 `≥576px`	中 `≥768px`	大 `≥992px`	特大 `≥1200px`
默认	`100%`	`540px`	`720px`	`960px`	`1140px`
`流式`	`100%`	`100%`	`100%`	`100%`	`100%`
`fluid="sm"`	`100%`	`540px`	`720px`	`960px`	`1140px`
`fluid="md"`	`100%`	`100%`	`720px`	`960px`	`1140px`
`fluid="lg"`	`100%`	`100%`	`100%`	`960px`	`1140px`
`fluid="xl"`	`100%`	`100%`	`100%`	`100%`	`1140px`

有关更多信息，请参阅上面的容器 <b-container> 部分

自动布局列

使用特定于断点的列类，可以轻松调整列大小，而无需显式编号属性，例如 <b-col sm="6">。

等宽列

例如，这里有两种网格布局，适用于从 xs 到 xl 的所有设备和视口。为每个需要的断点添加任意数量的无单位类，每列都将具有相同的宽度。

<b-container class="bv-example-row">
  <b-row>
    <b-col>1 of 2</b-col>
    <b-col>2 of 2</b-col>
  </b-row>

  <b-row>
    <b-col>1 of 3</b-col>
    <b-col>2 of 3</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-equal-width.vue -->

等宽多行

通过在希望列换行的位置插入 .w-100 来创建跨多行的等宽列。通过将 .w-100 与一些响应式显示实用程序混合，使换行具有响应性。

有一个 Safari flexbox 错误，如果没有明确的 flex-basis 或 border，则无法解决此问题。对于较旧的浏览器版本，有一些解决方法，但如果目标浏览器没有陷入错误版本，则不需要这些解决方法。

<b-container class="bv-example-row">
  <b-row>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <div class="w-100"></div>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<!-- b-grid-equal-width-multiple-lines.vue -->

设置一列宽度

Flexbox 网格列的自动布局还意味着您可以设置一列的宽度，并让兄弟列自动调整其周围的大小。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。

<b-container class="bv-example-row">
  <b-row class="text-center">
    <b-col>1 of 3</b-col>
    <b-col cols="8">2 of 3 (wider)</b-col>
    <b-col>3 of 3</b-col>
  </b-row>

  <b-row class="text-center">
    <b-col>1 of 3</b-col>
    <b-col cols="5">2 of 3 (wider)</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-one-width.vue -->

可变宽度内容

使用 {breakpoint}="auto" 道具根据其内容的自然宽度调整列的大小。

<b-container class="bv-example-row">
  <b-row class="justify-content-md-center">
    <b-col col lg="2">1 of 3</b-col>
    <b-col cols="12" md="auto">Variable width content</b-col>
    <b-col col lg="2">3 of 3</b-col>
  </b-row>

  <b-row>
    <b-col>1 of 3</b-col>
    <b-col cols="12" md="auto">Variable width content</b-col>
    <b-col col lg="2">3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-variable-width.vue -->

响应式类

Bootstrap 的网格包含五层预定义类，用于构建复杂的响应式布局。根据您认为合适的方式自定义超小、小、中、大或超大设备上列的大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用 col 和 cols="*" 道具。当您需要特定大小的列时，指定 cols 的数量；否则，请随意坚持使用 col（如果没有指定 cols，则会自动应用）。

<b-container class="bv-example-row">
  <b-row>
    <b-col>col</b-col>
    <b-col>col</b-col>
    <b-col>col</b-col>
    <b-col>col</b-col>
  </b-row>

  <b-row>
    <b-col cols="8">col-8</b-col>
    <b-col cols="4">col-4</b-col>
  </b-row>
</b-container>

<!-- b-grid-size-all-breakpoints.vue -->

从堆叠到水平

使用一组 sm="*" 或 sm（布尔值，表示 @sm 处宽度相等）道具，您可以创建一个基本的网格系统，该系统最初在超小设备上堆叠，然后在桌面（中）设备上变为水平。

<b-container class="bv-example-row">
  <b-row>
    <b-col sm="8">col-sm-8</b-col>
    <b-col sm="4">col-sm-4</b-col>
  </b-row>

  <b-row>
    <b-col sm>col-sm</b-col>
    <b-col sm>col-sm</b-col>
    <b-col sm>col-sm</b-col>
  </b-row>
</b-container>

<!-- b-grid-horizontal-stacked.vue -->

混合搭配

不希望您的列在某些网格层中简单堆叠？根据需要为每个层使用不同道具的组合。请参阅下面的示例，以更好地了解其工作原理。

<b-container class="bv-example-row">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <b-row>
    <b-col cols="12" md="8">cols="12" md="8"</b-col>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
  </b-row>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <b-row>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
  </b-row>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <b-row>
    <b-col cols="6">cols="6"</b-col>
    <b-col cols="6">cols="6"</b-col>
  </b-row>
</b-container>

<!-- b-grid-mix-and-match.vue -->

对齐

使用 flexbox 对齐实用程序垂直和水平对齐列。

注意：当 flex 容器具有 min-height（如下所示）时，Internet Explorer 11 不支持 flex 项目的垂直对齐。有关更多详细信息，请参阅 Flexbugs #3。

垂直对齐

对于一行中所有网格单元格的垂直对齐，请在 <b-row> 上使用 align-v 道具。可能的值为 'start'、'center'、'end'、'baseline' 和 'stretch'

<b-container class="bv-example-row bv-example-row-flex-cols">
  <b-row align-v="start">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>

  <b-row align-v="center">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>

  <b-row align-v="end">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>

  <b-row align-v="baseline">
    <b-col style="font-size: 0.75rem;">One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col style="font-size: 1.25rem;">One of three columns</b-col>
  </b-row>

  <b-row align-v="stretch">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>
</b-container>

<!-- b-grid-vertical-alignment.vue -->

对于单个网格单元格的垂直对齐，请在 <b-col> 上使用 align-self 道具。可能的值为 'start'、'center'、'end'、'baseline' 和 'stretch'

<b-container class="bv-example-row bv-example-row-flex-cols">
  <b-row>
    <b-col align-self="start">One of three columns</b-col>
    <b-col align-self="center">One of three columns</b-col>
    <b-col align-self="end">One of three columns</b-col>
  </b-row>
  <b-row>
    <b-col align-self="baseline">One of two columns</b-col>
    <b-col align-self="stretch">One of two  columns</b-col>
  </b-row>
</b-container>

<!-- b-grid-align-self.vue -->

水平对齐

要在行内水平对齐网格单元格，请对 <b-row> 使用 align-h 属性。可能的值有：'start'、'center'、'end'、'around' 和 'between'

<b-container class="bv-example-row">
  <b-row align-h="start">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="center">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="end">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="around">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="between">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>
</b-container>

<!-- b-grid-horizontal-alignment.vue -->

重新排序

对列进行排序

使用 order-* 属性来控制内容的视觉顺序。这些属性具有响应性，因此您可以按断点设置顺序（例如，order="1" order-md="2"）。支持在所有五个网格层级中使用 1 到 12。默认情况下，<b-col> 的 order 值为 0。

<b-container fluid class="bv-example-row">
  <b-row class="mb-3">
    <b-col>First in DOM, no order applied</b-col>
    <b-col order="5">Second in DOM, with a larger order</b-col>
    <b-col order="1">Third in DOM, with an order of 1</b-col>
  </b-row>

  <b-row class="mb-3">
    <b-col order="6">First in DOM, with order of 6</b-col>
    <b-col order="1">Second in DOM, with an order of 1</b-col>
    <b-col>Third in DOM, no order applied</b-col>
  </b-row>
</b-container>

<!-- b-grid-order.vue -->

顺序由 flexbox 的 CSS 样式 order 控制。

偏移列

您可以通过两种方式偏移网格列：响应式 offset-* 属性或 margin 实用程序类。网格 offset-* 属性的大小与列匹配，而 margin 实用程序类对于快速布局（其中偏移的宽度是可变的）更有用。

<b-container fluid class="bv-example-row">
  <b-row>
    <b-col md="4">md="4"</b-col>
    <b-col md="4" offset-md="4">md="4" offset-md="4"</b-col>
  </b-row>

  <b-row>
    <b-col md="3" offset-md="3">md="3" offset-md="3"</b-col>
    <b-col md="3" offset-md="3">md="3" offset-md="3"</b-col>
  </b-row>

  <b-row>
    <b-col md="6" offset-md="3">md="6" offset-md="3"</b-col>
  </b-row>
</b-container>

<!-- b-grid-offset.vue -->

除了在响应式断点处清除列之外，您可能还需要通过在较大的断点处将偏移量设置为 0 来重置偏移量

<b-container fluid class="bv-example-row">
  <b-row>
    <b-col sm="5" md="6">sm="5" md="6"</b-col>
    <b-col sm="5" offset-sm="2" md="6" offset-md="0">sm="5" offset-sm="2" md="6" offset-md="0"</b-col>
  </b-row>

  <b-row>
    <b-col sm="6" md="5" lg="6">sm="6" md="5" lg="6"</b-col>
    <b-col sm="6" md="5" offset-md="2" lg="6" offset-lg="0">sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"</b-col>
  </b-row>
</b-container>

<!-- b-grid-offset-reset.vue -->

列上的 margin 实用程序

随着 Bootstrap v4 中 flexbox 的出现，您可以使用 margin 和间距实用程序类（如 .mr-auto）来强制相邻列彼此远离。

<b-container fluid class="text-light text-center">
  <b-row class="mb-3">
    <b-col md="4" class="p-3 bg-info">md="4"</b-col>
    <b-col md="4" class="ml-auto p-3 bg-info">md="4" .ml-auto</b-col>
  </b-row>

  <b-row class="mb-3">
    <b-col md="3" class="ml-md-auto p-3 bg-info">md="3" .ml-md-auto</b-col>
    <b-col md="3" class="ml-md-auto p-3 bg-info">md="3" .ml-md-auto</b-col>
  </b-row>

  <b-row>
    <b-col cols="auto" class="mr-auto p-3 bg-info">cols="auto" .mr-auto</b-col>
    <b-col cols="auto" class="p-3 bg-info">cols="auto"</b-col>
  </b-row>
</b-container>

<!-- b-grid-margins.vue -->

嵌套网格

要使用默认网格嵌套内容，请在现有的 <b-col> 组件中添加一个新的 <b-row> 和一组 <b-col> 组件。嵌套行应包括一组总和为 12 或更少的列（不必使用所有 12 个可用列）。

<b-container fluid class="bv-example-row">
  <b-row>
    <b-col sm="9">
      Level 1: sm="9"
      <b-row>
        <b-col cols="8" sm="6">Level 2: cols="8" sm="6"</b-col>
        <b-col cols="4" sm="6">Level 2: cols="4" sm="6"</b-col>
      </b-row>
    </b-col>
  </b-row>
</b-container>

<!-- b-grid-nesting.vue -->

行列

需要 Bootstrap v4.4+ CSS

在 <b-row> 中使用响应式 cols-* 属性，以快速设置最适合呈现内容和布局的列数。普通列宽应用于各个 <b-col> 列（例如，<b-col md="4">），而行列 col-* 属性则作为快捷方式设置在父 <b-row> 上。

使用这些行列快速创建基本网格布局或控制卡片布局。Bootstrap v4.4 中行列的默认最大数为 6（与普通列不同，普通列的默认最大数为 12 列）

<b-row> 属性中指定的值是每行要创建的列数（而 <b-col> 上的属性是指要占据的列数）。

<b-container class="bv-example-row mb-3">
  <b-row cols="2">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<b-container class="bv-example-row mb-3">
  <b-row cols="3">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<b-container class="bv-example-row mb-3">
  <b-row cols="4">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<b-container class="bv-example-row">
  <b-row cols="4">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col cols="6">Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<!-- b-grid-row-cols-introduction.vue -->

可以通过以下 <b-row> 属性控制每个断点级别的列数

cols 适用于 xs 及更大屏幕
cols-sm 适用于 sm 及更大屏幕
cols-md 适用于 md 及更大屏幕
cols-lg 适用于 lg 及更大屏幕
cols-xl 适用于 xl 及更大屏幕

<b-container class="bv-example-row">
  <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<!-- b-grid-row-cols-breakpoints.vue -->

布局实用工具

为了实现更快速的移动端友好和响应式开发，Bootstrap 包含了数十个实用工具，用于显示、隐藏、对齐和设置内容间距。

更改 `display`

使用 Bootstrap 的显示实用工具，以响应式地切换 display 属性的常见值。将其与网格系统、内容或组件混合使用，以在特定视口中显示或隐藏它们。

Flexbox 选项

Bootstrap 4 是使用 Flexbox 构建的，但并非每个元素的 display 都已更改为 display: flex，因为这会增加许多不必要的覆盖，并意外更改关键浏览器行为。大多数组件都是使用启用了 Flexbox 构建的。

如果你需要将 display: flex 添加到某个元素，请使用 .d-flex 或某个响应式变体（例如，.d-sm-flex）来实现。你需要此类或 display 值，才能使用额外的 Flexbox 实用工具，用于调整大小、对齐、间距等。

边距和内边距

使用 margin 和 padding 间距实用工具来控制元素和组件的间距和大小。Bootstrap 4 包含一个五级间距实用工具量表，基于 1rem 值的默认 SASS $spacer 变量。为所有视口选择值（例如，.mr-3 表示 margin-right: 1rem），或选择响应式变体以针对特定视口（例如，.mr-md-3 表示从 md 断点开始的 margin-right: 1rem）。

切换 `visibility`

在不需要切换 display 时，可以使用 visibility 实用工具类来切换元素的 visibility。不可见的元素仍会影响页面的布局，但对于访客来说是不可见的。

组件参考

`<b-container>`

功能组件

查看源代码

<b-container> 属性
<b-container> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`流式`	`Boolean` 或 `String`	`false`	设置为 true 时，始终使行宽为 100%，或将其设置为 Bootstrap 断点名称之一，以使宽度达到断点（需要 Bootstrap v4.4+ CSS 才能获得特定于断点的值）
`tag`	`String`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签

插槽

名称	说明
`默认`	放置在容器中的内容

`<b-row>`

功能组件

查看源代码

<b-row> 属性
<b-row> 插槽

属性

所有属性默认值均可全局配置。

属性（单击按升序排列）	类型（单击按升序排列）	默认值	说明
`align-content`	`String`	`null`	在交叉轴上对齐列项目：'start'、'center'、'end'、'around'、'between' 或 'stretch'。对单行项目没有影响
`align-h`	`String`	`null`	所有列的水平对齐/间距：'start'、'center'、'end'、'around' 或 'between'
`align-v`	`String`	`null`	一行中所有列的垂直对齐：'start'、'center'、'end'、'baseline' 或 'stretch'
`cols` v2.2.0+	`Number` 或 `String`		在 'xs' 断点处创建的行列数。需要 Bootstrap v4.4 CSS
`cols-lg` v2.2.0+	`Number` 或 `String`		在 'lg' 断点处创建的行列数。需要 Bootstrap v4.4 CSS
`cols-md` v2.2.0+	`Number` 或 `String`		在 'md' 断点处创建的行列数。需要 Bootstrap v4.4 CSS
`cols-sm` v2.2.0+	`Number` 或 `String`		在 'sm' 断点处创建的行列数。需要 Bootstrap v4.4 CSS
`cols-xl` v2.2.0+	`Number` 或 `String`		在 'xl' 断点处创建的行列数。需要 Bootstrap v4.4 CSS
`no-gutters`	`布尔值`	`false`	设置后，从行中移除边距，从子列中移除内边距
`tag`	`String`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签

插槽

名称	说明
`默认`	放置在行中的内容

`<b-col>`

功能组件

查看源代码

<b-col> 属性
<b-col> 插槽

属性

所有属性默认值均可全局配置。

属性（单击按升序排列）	类型（单击按升序排列）	默认值	说明
`align-self`	`String`	`null`	网格单元格相对于行的垂直对齐方式：“start”、“center”、“end”、“baseline”或“stretch”
`col`	`布尔值`	`false`	当为 true 时，将创建等宽列网格单元格跨度，适用于 xs 及更高断点
`cols`	`Number` 或 `String`		网格单元格跨度的列数，适用于 xs 及更高断点
`lg`	`布尔值`或`数字`或`字符串`		网格单元格跨度的列数，适用于 lg 及更高断点
`md`	`布尔值`或`数字`或`字符串`		网格单元格跨度的列数，适用于 md 及更高断点
`offset`	`Number` 或 `String`		网格单元格的偏移列数，适用于 xs 及更高断点
`offset-lg`	`Number` 或 `String`		网格单元格的偏移列数，适用于 lg 及更高断点
`offset-md`	`Number` 或 `String`		网格单元格的偏移列数，适用于 md 及更高断点
`offset-sm`	`Number` 或 `String`		网格单元格的偏移列数，适用于 sm 及更高断点
`offset-xl`	`Number` 或 `String`		网格单元格的偏移列数，适用于 xl 及更高断点
`order`	`Number` 或 `String`		网格单元格的 flex 顺序，适用于 xs 及更高断点
`order-lg`	`Number` 或 `String`		网格单元格的 flex 顺序，适用于 lg 及更高断点
`order-md`	`Number` 或 `String`		网格单元格的 flex 顺序，适用于 md 及更高断点
`order-sm`	`Number` 或 `String`		网格单元格的 flex 顺序，适用于 sm 及更高断点
`order-xl`	`Number` 或 `String`		网格单元格的 flex 顺序，适用于 xl 及更高断点
`sm`	`布尔值`或`数字`或`字符串`		网格单元格跨度的列数，适用于 sm 及更高断点
`tag`	`String`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签
`xl`	`布尔值`或`数字`或`字符串`		网格单元格跨度的列数，适用于 xl 及更高断点

插槽

名称	说明
`默认`	放置在 col 中的内容

`<b-form-row>`

功能组件

查看源代码

<b-form-row> 属性
<b-form-row> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`tag`	`String`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签

插槽

名称	说明
`默认`	放置在表单行中的内容

导入单个组件

可以通过以下命名导出将单个组件导入到项目中

组件	命名导出	导入路径
`<b-container>`	`BContainer`	`bootstrap-vue`
`<b-row>`	`BRow`	`bootstrap-vue`
`<b-col>`	`BCol`	`bootstrap-vue`
`<b-form-row>`	`BFormRow`	`bootstrap-vue`

示例

import { BContainer } from 'bootstrap-vue'
Vue.component('b-container', BContainer)

作为 Vue.js 插件导入

此插件包括上述所有列出的各个组件。插件还包括任何组件别名。

命名导出	导入路径
`LayoutPlugin`	`bootstrap-vue`

示例

import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)

工作原理

容器 <b-container>

默认容器

流体宽度容器

响应式流体容器

行 <b-row> 和 <b-form-row>

列 <b-col>

网格选项

容器大小

自动布局列

等宽列

等宽多行

设置一列宽度

可变宽度内容

响应式类

所有断点

从堆叠到水平

混合搭配

对齐

垂直对齐

水平对齐

重新排序

对列进行排序

偏移列

列上的 margin 实用程序

嵌套网格

行列

布局实用工具

更改 display

Flexbox 选项

边距和内边距

切换 visibility

组件参考

属性

插槽

属性

插槽

属性

插槽

属性

插槽

导入单个组件

作为 Vue.js 插件导入

容器 `<b-container>`

行 `<b-row>` 和 `<b-form-row>`

列 `<b-col>`

更改 `display`

切换 `visibility`