Alignment
align 属性を使用して、カラムを垂直方向と水平方向に整列できます。
Vertical alignment
<template>
<Container>
<Row align-items="start">
<Col>One of three cols</Col>
<Col>One of three cols</Col>
<Col>One of three cols</Col>
</Row>
<Row align-items="center">
<Col>One of three cols</Col>
<Col>One of three cols</Col>
<Col>One of three cols</Col>
</Row>
<Row align-items="end">
<Col>One of three cols</Col>
<Col>One of three cols</Col>
<Col>One of three cols</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row>
<Col align-self="start">
.self-start
</Col>
<Col align-self="center">
.self-center
</Col>
<Col align-self="end">
.self-end
</Col>
</Row>
</Container>
</template>
Horizontal alignment
<template>
<Container>
<Badge>justify-start</Badge>
<Row justify-content="start">
<Col col="4">
One of two cols
</Col>
<Col col="4">
One of two cols
</Col>
</Row>
<Badge>justify-center</Badge>
<Row justify-content="center">
<Col col="4">
One of two cols
</Col>
<Col col="4">
One of two cols
</Col>
</Row>
<Badge>justify-end</Badge>
<Row justify-content="end">
<Col col="4">
One of two cols
</Col>
<Col col="4">
One of two cols
</Col>
</Row>
<Badge>justify-around</Badge>
<Row justify-content="around">
<Col col="4">
One of two cols
</Col>
<Col col="4">
One of two cols
</Col>
</Row>
<Badge>justify-between</Badge>
<Row justify-content="between">
<Col col="4">
One of two cols
</Col>
<Col col="4">
One of two cols
</Col>
</Row>
<Badge>justify-evenly</Badge>
<Row justify-content="evenly">
<Col col="4">
One of two cols
</Col>
<Col col="4">
One of two cols
</Col>
</Row>
</Container>
</template>
Column wrapping
1 つの行内に 12 を超えるカラムが配置されている場合、追加したカラムの各グループは、1 つの単位として新しい行に折り返されます。
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<template>
<Container>
<Row>
<Col col="9">
.col-9
</Col>
<Col col="4">
.col-4
<br />
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new
line as one contiguous unit.
</Col>
<Col col="6">
.col-6
<br />
Subsequent columns continue along the new line.
</Col>
</Row>
</Container>
</template>
<!-- <style lang="sass" scoped>
.row > div
padding: 10px 15px
background: rgba(86,61,124,.15)
border: 1px solid rgba(86,61,124,.2)
.row + .row
margin-top: 1rem
.row
background: rgba(255,0,0,.1)
</style> -->
Column breaks
Flexbox でカラムを改行するにはハックが必要です。
改行したい場所にwidth="100"の要素を追加します。
複数の <Row></Row> で実現できますが、すべての実装方法がこれに対応できるわけではありません。
<template>
<Container>
<Row>
<Col col="6 sm-3">
.col-6 .col-sm-3
</Col>
<Col col="6 sm-3">
.col-6 .col-sm-3
</Col>
<b-div relative-width="100" />
<Col col="6 sm-3">
.col-6 .col-sm-3
</Col>
<Col col="6 sm-3">
.col-6 .col-sm-3
</Col>
</Row>
</Container>
</template>
また、レスポンシブ表示ユーティリティ を利用して特定のブレークポイントで改行できます。
<template>
<Container>
<Row>
<Col col="6 sm-4">
.col-6 .col-sm-4
</Col>
<Col col="6 sm-4">
.col-6 .col-sm-4
</Col>
<b-div
relative-width="100"
display="none md-block"
/>
<Col col="6 sm-4">
.col-6 .col-sm-4
</Col>
<Col col="6 sm-4">
.col-6 .col-sm-4
</Col>
</Row>
</Container>
</template>
Reordering
Order
コンテンツの視覚的な順序を制御するために order 属性を使用します。
これらのクラスはレスポンシブなので、ブレークポイントで order を設定することができます (例えば、order="1 md-2")。
6 つのグリッドレベルで 1から 5 をサポートしています。
<template>
<Container>
<Row>
<Col>First in DOM, no order applied</Col>
<Col order="5">
Second in DOM, with a larger order
</Col>
<Col order="1">
Third in DOM, with an order of 1
</Col>
</Row>
</Container>
</template>
また、レスポンシブな order="first" と order="last" クラスもあり、これを適用することで要素の order を変更することができます。
これはそれぞれ order: -1 と order: 6 を適用して要素の order を変更するクラスです。
これらのクラスは、必要に応じて番号付きの order="* クラスと混在させることもできます。
<template>
<Container>
<Row>
<Col order="last">
First in DOM, ordered last
</Col>
<Col>Second in DOM, unordered</Col>
<Col order="first">
Third in DOM, ordered first
</Col>
</Row>
</Container>
</template>
Offsetting columns
グリッドのカラムをオフセットするには、レスポンシブな offset グリッド属性と margin utilities の 2 つの方法があります。
グリッド属性はカラムに合わせてサイズを調整しますが、マージンはオフセットの幅を可変にして素早くレイアウトする場合に便利です。
Offset classes
offset="md-*" クラスを使ってカラムを右に移動します。これらのクラスはカラムの左マージンを * カラム分増やします。
例えば、offset="md-4" は col="md-4"を 4 カラムぶん右に移動させます。
<template>
<Container>
<Row>
<Col col="md-4">
.col-md-4
</Col>
<Col
col="md-4"
offset="md-4"
>
.col-md-4 .offset-md-4
</Col>
</Row>
<Row>
<Col
col="md-3"
offset="md-3"
>
.col-md-3 .offset-md-3
</Col>
<Col
col="md-3"
offset="md-3"
>
.col-md-3 .offset-md-3
</Col>
</Row>
<Row>
<Col
col="md-6"
offset="md-3"
>
.col-md-6 .offset-md-3
</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row>
<Col col="sm-5 md-6">
.col-sm-5 .col-md-6
</Col>
<Col
col="sm-5 md-6"
offset="sm-2 md-0"
>
.col-md-4 .offset-md-4
</Col>
</Row>
<Row>
<Col col="sm-6 md-5 lg-6">
.col-sm-6 .col-md-5 .col-lg-6
</Col>
<Col
col="sm-6 md-5 lg-6"
offset="md-2 lg-0"
>
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
</Col>
</Row>
</Container>
</template>
Margin utilities
margin="e-auto" のようなマージンユーティリティを使用して、同階層のカラムを強制的に離すことができるようになりました。
<template>
<Container>
<Row>
<Col col="md-4">
.col-md-4
</Col>
<Col
col="md-4"
margin="s-auto"
>
.col-md-4 .ms-auto
</Col>
</Row>
<Row>
<Col
col="md-3"
margin="s-md-auto"
>
.col-md-3 .ms-md-auto
</Col>
<Col
col="md-3"
margin="s-md-auto"
>
.col-md-3 .ms-md-auto
</Col>
</Row>
<Row>
<Col
col="auto"
margin="e-auto"
>
.col-auto .me-auto
</Col>
<Col col="auto">
.col-auto
</Col>
</Row>
</Container>
</template>
Standalone column classes
また、col="*" クラスは row の外側で要素に特定の幅を与えるために使用することもできます。
カラムクラスが行の直接の子要素ではない場合、パディングは省略されます。
<template>
<Col
col="3"
background-color="light"
padding="3"
border
>
.col-3: width of 25%
</Col>
<Col
col="sm-9"
background-color="light"
padding="3"
border
>
.col-sm-9: width of 75% above sm breakpoint
</Col>
</template>
この属性は、ユーティリティと併用することで、レスポンシブに画像をフロートすることができます。
必ず clearfix で内容をラップして、テキストが短い場合はフロートをクリアするようにしてください。
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
<template>
<b-div clearfix>
<b-img
src="https://dummyimage.com/377x210/868e96/ffffff&text=Responsive floated image"
col="md-6"
float="md-end"
margin="b-3 s-md-3"
/>
<b-p>
A paragraph of placeholder text. We're using it here to show the use of
the clearfix class. We're adding quite a few meaningless phrases here to
demonstrate how the columns interact here with the floated image.
</b-p>
<b-p>
As you can see the paragraphs gracefully wrap around the floated image.
Now imagine how this would look with some actual content in here, rather
than just this boring placeholder text that goes on and on, but actually
conveys no tangible information at. It simply takes up space and should
not really be read.
</b-p>
<b-p>
And yet, here you are, still persevering in reading this placeholder text,
hoping for some more insights, or some hidden easter egg of content. A
joke, perhaps. Unfortunately, there's none of that here.
</b-p>
</b-div>
</template>