ポジション

要素の位置を素早く設定するには、これらのヘルパーを使用します。

Fixed top

viewportの上部に要素を配置します。(追加でCSSを必要となる場合があります)

vue
<template>
 <b-div fixed="top">
  fixed-top
 </b-div>
</template>

Fixed bottom

viewportの下部に要素を配置します。(追加でCSSを必要となる場合があります)

vue
<template>
 <b-div position="fixed-bottom">
  ...
 </b-div>
</template>

Sticky top

スクロールした後, 要素をviewportの上部に配置します。

sticky-top はCSSの position:sticky を使用しますが、これはすべてのブラウザーで完全にサポートされているわけではありません。

vue
<template>
 <b-div sticky="top">
  ...
 </b-div>
</template>

Responsive sticky top

レスポンシブなバリエーションは sticky-top の下記を参考にしてください。

vue
<template>
 <b-div sticky="sm-top">
  Stick to the top on viewports sized SM (small) or wider
 </b-div>
 <b-div sticky="md-top">
  Stick to the top on viewports sized MD (medium) or wider
 </b-div>
 <b-div sticky="lg-top">
  Stick to the top on viewports sized LG (large) or wider
 </b-div>
 <b-div sticky="xl-top">
  Stick to the top on viewports sized XL (extra-large) or wider
 </b-div>
</template>