如何使用 bootstrap-vue 将标签标题设置在顶部答案

【问题标题】：How to set tab title sticky on top with bootstrap-vue如何使用 bootstrap-vue 将标签标题设置在顶部
【发布时间】：2021-04-13 20:07:47
【问题描述】：

我目前正在使用 bootstrap-vue 来构建一个包含多个选项卡的页面。简而言之就是代码

<div id="app">
  <template>
    <div>
      <b-tabs content-class="mt-3 ml-3">
        <b-tab title="Settings">
          <div class="col-md-4">
            <h2>Hello</h2>
          </div>
        <b-tab>
        <b-tab title="Question">
          <div class="col-md-4">
            <h2>World</h2>
          </div>
        <b-tab>
      </b-tabs>
    </div>
  </template>
</div>

如何让标签页的标题保持固定，这样每当我在标签页内滚动时，标签页总是在顶部？谢谢你

【问题讨论】：

标签： tabs bootstrap-vue

【解决方案1】：

您可以通过将nav-wrapper-class="sticky-top" 添加到<b-tabs> 来使用sticky-top 类。这将使导航成为sticky，并随着页面滚动。

根据您的设置，您可能需要为导航添加背景颜色，以避免在导航下方看到标签内容，因为默认情况下它是透明的。这就是我在示例中使用bg-light 的原因。

new Vue({
  el: '#app'
})

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>



<div id="app" class="p-5">
  <b-card no-body>
    <b-tabs content-class="mt-3 ml-3" nav-wrapper-class="sticky-top bg-light" card>
      <b-tab title="Settings">
        <div class="col-md-4">
          <h2 v-for="i in 15">Hello</h2>
        </div>
      </b-tab>
      <b-tab title="Question">
        <div class="col-md-4">
          <h2>World</h2>
        </div>
      </b-tab>
    </b-tabs>
  </b-card>

  <br v-for="i in 25" />
</div>

或者，您可以改为在标签内容中添加滚动条（在需要时）。意味着导航保持在视线范围内。

new Vue({
  el: '#app'
})

.custom-class {
  max-height: 300px;
  overflow-y: auto;
}

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>



<div id="app" class="p-5">
  <b-card no-body>
    <b-tabs content-class="pt-3 pl-3 custom-class" card>
      <b-tab title="Settings">
        <div class="col-md-4">
          <h2 v-for="i in 15">Hello</h2>
        </div>
      </b-tab>
      <b-tab title="Question">
        <div class="col-md-4">
          <h2>World</h2>
        </div>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

【讨论】：