布局与网格(Layout and Grid System)

使用功能强大的mobile first flexbox网格（通过<b-container>, <b-row>, <b-form-row>和 <b-col>组件）构建所有形状和大小的布局，这得益于12列系统、5个默认响应层、CSS Sass变量和混合以及数十个预定义类。

BootstrapVue提供了一些为布局定制的方便的功能组件，与传统的Bootstrap v4标记相比，它可以简化复杂的页面标记。 可以在传统的Bootstrap v4标记（即<div>s和类）和BootstrapVue方便的功能布局组件之间来回切换。

工作原理

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

1 of 3
2 of 3
3 of 3
<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>

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

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

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

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

容器 <b-container>

容器（<b-container>）是引导中最基本的布局元素。 默认情况下，可以从响应的固定宽度容器（意味着每个断点处的max-width更改）或通过设置“流体”属性选择流体宽度（意味着始终100%宽）， 也可以从响应容器（容器在特定断点之前是流体）中选择（需要引导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类。

响应式液体容器

Requires Bootstrap v4.4+ CSS

响应容器是Bootstrap v4.4中的新功能。它们允许您指定一个100%宽度（fluid）的容器，直到达到特定的断点，此时应用max-width。例如， 将“prop fluid”设置为'md'将呈现一个100%宽的容器， 直到到达'md'断点，此时它将保持在该断点的容器max-width。 

<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 prop设置为断点名称将转换为Bootstrap类.container-{breakpoint}。

rows <b-row> 和 <b-form-row>

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

通过将no-gutters属性设置为<b-row>，可以从<b-row>移除 边距，从<b-col>移除填充。

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

columns <b-col>

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

网格选项

引导程序使用em 或rem单位来定义大多数大小， 而 px则用于网格断点和容器宽度。这是因为视区宽度是以像素为单位的，并且不随字体大小而改变。

借助便捷的表格，了解Bootstrap网格系统在多个设备上如何工作。

特效 (xs)
<576px 		小 (sm)
≥576px 		中等 (md)
≥768px 		大 (lg)
≥992px 		特大 (xl)
≥1200px
最大容器宽度 None (auto) 540px 720px 960px 1140px
属性 cols="*" sm="*" md="*" lg="*" xl="*"
列数 12
Gutter 宽度 30px (15px on each side of a column)
可嵌套 Yes
偏移量 offset="*" offset-sm="*" offset-md="*" offset-lg="*" offset-xl="*"
命令 order="*" order-sm="*" order-md="*" order-lg="*" order-xl="*"

注意事项:

  • 没有xs属性。cols属性 引用xs（最小）断点。
  • 上面的断点值和名称是引导默认值。它们可以通过 SCSS 变量和（如果也使用自定义断点名称） 通过BootstrapVue全局配置进行自定义。

自动布局列

利用特定于断点的列类来轻松进行列大小调整，而无需像<b-col sm="6">这样的显式编号的属性。

等宽列

例如，以下是两个网格布局，它们适用于从xs到xl的每个设备和视口。 为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<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>

等宽多行

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

有一个Safari flexbox 错误， 使它无法在没有明确的flex-basis或 边框的情况下工作。 对于较旧的浏览器版本，有一些解决方法，但是如果目标浏览器不属于多虫的版本，则不必这样做。

Column
Column
Column
Column
<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>

设置一列宽度

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

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
<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>

可变宽度内容

使用{breakpoint}="auto"属性可以根据其内容的自然宽度来调整列的大小。

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
<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>

响应类

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

所有断点

对于从最小的设备到最大的设备相同的网格，请使用col和 cols="*"属性。 当需要特殊大小的列时，请指定多个列数； 否则，请坚持使用col（如果未指定cols，则会自动应用）。

col
col
col
col
col-8
col-4
<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>

堆叠到水平

使用一组sm="*" or 或（布尔值，表示相等宽度的@sm）属性，您可以创建一个基本的网格系统，该系统开始堆叠在超小型设备上，然后在台式机（中型）上变为水平设备。

col-sm-8
col-sm-4
col-sm
col-sm
col-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>

混搭

不希望您的列简单地堆叠在一些网格层中？根据需要为每层使用不同的属性组合。请参阅下面的示例，以更好地了解它是如何工作的。

cols="12" md="8"
cols="6" md="4"
cols="6" md="4"
cols="6" md="4"
cols="6" md="4"
cols="6"
cols="6"
<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>

对齐

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

垂直对齐

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<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-container>
One of three columns
One of three columns
One of three columns
<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-container>

水平对齐

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<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>

重新排序

排序列

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

First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1
First in DOM, with order of 6
Second in DOM, with an order of 1
Third in DOM, no order applied
<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>

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

偏移列

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

md="4"
md="4" offset-md="4"
md="3" offset-md="3"
md="3" offset-md="3"
md="6" offset-md="3"
<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>

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

sm="5" md="6"
sm="5" offset-sm="2" md="6" offset-md="0"
sm="6" md="5" lg="6"
sm="6" md="5" offset-md="2" col-lg="6" offset-lg="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>

列上的边距实用程序

通过在Bootstrap v4中移至flexbox，您可以使用margin 和 spacing实用程序类 （如.mr-auto）来迫使同级列彼此分离。

md="4"
md="4" .ml-auto
md="3" .ml-md-auto
md="3" .ml-md-auto
cols="auto" .mr-auto
cols="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-col>组件内 添加一个新的<b-row>和一组<b-col>组件。 嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。

Level 1: sm="9"
Level 2: cols="8" sm="6"
Level 2: cols="4" sm="6"
<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>

行列

Requires 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>上的属性指的是要占用的列数）。

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
<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-row>属性控制每个断点级别的列数：

  • cols for xs and up screens
  • cols-sm for sm and up screens
  • cols-md for md and up screens
  • cols-lg for lg and up screens
  • cols-xl for xl and up screens
Column
Column
Column
Column
Column
Column
<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>

布局实用程序

为了更快地进行适合移动设备的响应式开发，Bootstrap包含了数十种实用程序类，用于显示，隐藏，对齐和分隔内容。

变更 display

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

Flexbox 选项

Bootstrap 4是使用flexbox构建的，但并非每个元素的code translate="no" class="notranslate text-nowrap">display 都已更改为display: flex，因为这会添加许多不必要的替代内容，并且会意外更改关键的浏览器行为。 大多数组件都是在启用flexbox的情况下构建的。

如果您需要在元素上添加display: flex，请使用.d-flex或 自适应变体之一（例如.d-sm-flex）。您将需要此类或显示值， 以允许使用额外的flexbox 实用程序来调整大小，对齐，间隔等。

边距和填充

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

切换可见性

当不需要切换display时， 可以使用可见性实用程序类来切换元素的visibility。 不可见的元素仍然会影响页面的布局，但在视觉上对访问者是隐藏的。

组件引用

<b-container>

功能部件
View source

属性

属性 类型 默认值 描述
tag String 'div' 指定要呈现的HTML标记，而不是默认标记
fluid Boolean or String false 当设置为true时，使行始终为100%宽，或设置为100%宽直至断点的引导断点名称之一（对于断点特定值，需要引导v4.4+CSS）

<b-row>

功能部件
View source

属性

属性 (单击可升序排序) 类型 默认值 描述
tag String 'div' 指定要呈现的HTML标记，而不是默认标记
no-gutters Boolean false 设置后，从行中移除边距并从子列中移除填充
align-v String 一行中所有列的垂直对齐方式：“开始”、“居中”或“结束”
align-h String 所有列的水平对齐/间距：“开始”，“中心”，“结束”，“周围”或“中间”
align-content String 在横轴上将列项目对齐在一起：“开始”，“中心”，“结束”，“周围”，“之间”或“拉伸”。 对单行项目没有影响
cols v2.2.0+ String or Number 在“ xs”断点处创建的数字行列。 需要Bootstrap v4.4 CSS
cols-sm v2.2.0+ String or Number 在“ sm”断点处创建的数字行列。 需要Bootstrap v4.4 CSS
cols-md v2.2.0+ String or Number 在“ md”断点处创建的数字行列。 需要Bootstrap v4.4 CSS
cols-lg v2.2.0+ String or Number 在'lg'断点处创建的数字行列。 需要Bootstrap v4.4 CSS
cols-xl v2.2.0+ String or Number 在“ xl”断点处创建的数字行列。 需要Bootstrap v4.4 CSS

<b-col>

功能部件
View source

属性

属性 (点击排序升序) 类型 默认值 描述
col Boolean false 如果为true，则使xs和向上断点的宽度相等的列网格单元格跨度
cols String or Number 网格单元格跨xs和向上断点的列数
sm Boolean or String or Number false 网格单元格跨越sm和向上断点的列数
md Boolean or String or Number false 网格单元格跨越md和上断点的列数
lg Boolean or String or Number false 网格单元格跨越lg和上断点的列数
xl Boolean or String or Number false 网格单元格跨xl和向上断点的列数
offset String or Number 网格单元在xs和向上断点处偏移的列数
offset-sm String or Number 网格单元格为sm和向上断点偏移的列数
offset-md String or Number 网格单元格为md和上断点偏移的列数
offset-lg String or Number lg和向上断点偏移的网格单元格的列数
offset-xl String or Number 网格单元格针对xl和上断点偏移的列数
order String or Number 针对xs和向上断点的网格单元的弹性顺序
order-sm String or Number 用于sm和向上断点的网格单元的弹性顺序
order-md String or Number md和上断点的网格单元的弹性顺序
order-lg String or Number lg和上断点的网格单元的弹性顺序
order-xl String or Number 针对xl和更高断点的网格单元的伸缩顺序
align-self String 网格单元相对于行的垂直对齐：“开始”，“中心”或“结束”
tag String 'div' 指定要呈现的HTML标签，而不是默认标签

<b-form-row>

功能部件
View source

属性

属性 类型 默认值 描述
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)