Как создать мобильную навигационную панель с помощью начальной загрузки 4 с помощью Vue? - PullRequest
Новая
       27

Как создать мобильную навигационную панель с помощью начальной загрузки 4 с помощью Vue?

0 голосов
/ 29 ноября 2018

Я очень стараюсь успешно создать навигационную панель с начальной загрузкой 4 с помощью vue.Вот мой код в App.vue:

NavBar 

<b-navbar-nav>
  <b-nav-item href="#">Link</b-nav-item>
  <b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>

<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">

  <b-nav-form>
    <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
    <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
  </b-nav-form>

  <b-nav-item-dropdown text="Lang" right>
    <b-dropdown-item href="#">EN</b-dropdown-item>
    <b-dropdown-item href="#">ES</b-dropdown-item>
    <b-dropdown-item href="#">RU</b-dropdown-item>
    <b-dropdown-item href="#">FA</b-dropdown-item>
  </b-nav-item-dropdown>

  <b-nav-item-dropdown right>
    <!-- Using button-content slot -->
    <template slot="button-content">
      <em>User</em>
    </template>
    <b-dropdown-item href="#">Profile</b-dropdown-item>
    <b-dropdown-item href="#">Signout</b-dropdown-item>
  </b-nav-item-dropdown>
</b-navbar-nav>

Панель навигации хорошо работает на рабочем столено на мобильном навбар-коллапс не работает хорошо.Бренд NavBar всплывает влево изображение того, как оно выглядит

1 Ответ

0 голосов
/ 30 ноября 2018

Взглянув на документы Bootstrap-Vue, кажется, что проблема там (и, следовательно, в вашем коде) заключается в том, что разметка помещает b-navbar-toggle перед b-navbar-brand, поэтому, когда размерЭкран уменьшен, кнопка появляется перед брендом, в результате чего вы видите результат.Просто переместите b-navbar-toggle прямо перед открывающим тэгом секции свертывания, и вы получите правильный результат. 

<b-navbar toggleable="md" type="dark" variant="info">
  <b-navbar-brand href="#">NavBar</b-navbar-brand>

  <!-- Put the toggle here after the brand -->
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

  <b-collapse is-nav id="nav_collapse">

    <b-navbar-nav>
      <b-nav-item href="#">Link</b-nav-item>
      <b-nav-item href="#" disabled>Disabled</b-nav-item>
    </b-navbar-nav>

    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto">

      <b-nav-form>
        <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>

      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown right>
        <!-- Using button-content slot -->
        <template slot="button-content">
          <em>User</em>
        </template>
        <b-dropdown-item href="#">Profile</b-dropdown-item>
        <b-dropdown-item href="#">Signout</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>

  </b-collapse>


</b-navbar>
...