Bootstrap Vue 导航栏没有填满屏幕

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，padding/white space 应该消失。

如果您想要 b-container 填充页面，您可以添加 fluid 属性，这将从容器中删除最大宽度。带有 fluid 属性的 b-container 每边仍然会有一个小的填充，这样内容就不会粘在边上。

Bootstrap Vue 导航栏没有填满屏幕

Bootstrap Vue navbar doesn't fill screen

html

twitter-bootstrap

bootstrap-vue