[Vuejs]-Is there a way to reduce the width of a Bootstrap Vue nav item dropdown?

by

1👍

✅

The dropdown menu has a min-width by defualt causing the extra space.
Applying a class to the prop menu-class with the style min-width: 0; removes the extra spacing.

new Vue({
  el: '#app'
})
.minw-none {
  min-width: 0 !important;
}
<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-navbar type="light" variant="light">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <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-item-dropdown text="Lang" menu-class="minw-none" 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-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
👤Hiws

Leave a comment