时间戳

首页 > 解决方案 > Bootstrap Vue 导航栏无法填满屏幕

html - Bootstrap Vue 导航栏无法填满屏幕

问题描述

我正在使用从 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>

标签： htmltwitter-bootstrapbootstrap-vue

解决方案

b-container默认情况下，在左侧和右侧有一个最大宽度。

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

如果要b-container填充页面，可以添加fluid将从容器中删除最大宽度的道具。b-containerwith道具的fluid每一侧仍然会有一个小填充，这样内容就不会粘在两侧。

推荐阅读