Question

我正在使用从github获得的bootstrap-vue导航栏。

由于某种原因，它无法填满屏幕。两侧都有空白。如何扩展导航栏以适合屏幕尺寸？

  <template>
    <b-container class="mt-2">
      <b-navbar toggleable="md" type="dark" variant="info">
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse is-nav id="nav-collapse">

          <b-navbar-nav>
            <b-nav-item to="/events">Events</b-nav-item>
            <b-nav-item to="/monitor">Monitor</b-nav-item>
            <b-nav-item to="/configuration">Configuration</b-nav-item>

            <b-nav-item to="/comments">Comments</b-nav-item>
            <b-nav-item to="/submit">Submit</b-nav-item>
          </b-navbar-nav>

          <b-navbar-nav class="ml-auto" v-if="$store.state.loggedIn">
            <b-nav-text>{{ $store.state.user.username }}</b-nav-text>
            <b-nav-item @click.prevent="logout()">Logout</b-nav-item>
          </b-navbar-nav>

          <b-navbar-nav class="ml-auto" v-if="!$store.state.loggedIn">
            <b-nav-item to="/login">Login</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>

      <b-container class="mt-1">
        <nuxt/>
      </b-container>

    </b-container>
  </template>

  <script>
  export default {
    methods: {
      logout () {
        this.$store.dispatch('logout')
        this.$router.push('/')
      }
    }
  }
  </script>

Answer 1

b-container在左侧和右侧默认具有最大宽度。

用普通的div替换模板根目录中的b-container，填充/空格应该消失了。

如果您想用b-container来填充页面，则可以添加fluid道具，该道具将从容器中删除最大宽度。带有b-container道具的fluid仍将在每侧保留少量填充，以使内容不会粘在两侧。

Bootstrap Vue导航栏未填满屏幕

1 个答案: