javascript - bootstrap-vue 的网格系统在使用 b-list-group-item 导航后中断

Question

我将 nuxt.js 与 bootstrap-vue 一起使用，当我使用 nuxt-link 在我的网站上导航时，网格系统会中断。基本上，当我将 URL 直接放在浏览器上时，会发生什么，比如“localhost:3000/contato”，它工作得很好。但是，如果我使用<b-list-group-item to="/contato">Contato</b-list-group-item>css 就会完全中断。

它应该是什么样子？ https://i.stack.imgur.com/D9UCN.png注意：这是用“错误的 css”刷新页面后的样子

使用它看起来像<b-list-group-item to="/contato">Contato</b-list-group-item>什么？ https://i.stack.imgur.com/mMPvf.png

这是代码：

<template>
  <b-container>
    <b-row align-h="between" cols="1" cols-lg="2" cols-sm="1" class="mt-4">
      <b-col align-self="center">
        <b-img
          center
          style="max-height: 200px;"
          src="https://www.dovercourt.org/wp-content/uploads/2019/11/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.jpg"
        />
        <p style="text-align: center">{{ artist.name }}</p>
      </b-col>
      <b-col align-self="center">
        <p id="description_text" class="text-justify" style="width: 100%">
          {{ artist.description_text }}
        </p>
      </b-col>
    </b-row>
    <div class="w-100"></div>
    <b-row cols="1" cols-lg="3" cols-sm="1">
      <b-col>
        <InstagramEmbed :url="artist.url1" />
      </b-col>
      <b-col>
        <InstagramEmbed :url="artist.url2" />
      </b-col>
      <b-col>
        <InstagramEmbed :url="artist.url3" />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import InstagramEmbed from 'vue-instagram-embed'

export default {
  components: {
    InstagramEmbed
  },
  data() {
    return {
      artist: this.$store.state.artistas.artistas.find(
        (x) => x.id === parseInt(this.$route.params.id)
      )
    }
  }
}
</script>

<style></style>

我试图将文本放在“InstagramEmbed”组件所在的位置，但我仍然得到相同的结果。

我尝试了所有可用的路由组件，但仍然得到相同的结果。

我有一个侧边栏，可以在可以使用导航栏上的按钮切换的页面之间导航。这是侧边栏：

<template>
  <div class="mt-2">
    <b-button
      id="sidebar-button"
      v-b-toggle.sidebar-1
      style="background-color: #561b1f; color: #f3a40c;"
    >
      &#x2B24;
    </b-button>

    <b-sidebar id="sidebar-1" title="" shadow>
      <div class="px-3 py-2">
        <b-list-group>
          <b-list-group-item to="/contato">Contato</b-list-group-item>
        </b-list-group>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
export default {}
</script>

<style></style>

标签： javascriptvue.jsnuxt.jsbootstrap-vue