javascript - 有没有办法减少 Bootstrap Vue 导航元素下拉菜单的宽度？

Question

我有一个用 bootstrap vue 制作的导航栏。在“语言”部分，我希望它只显示标志，但标志后的空间太多，有没有办法减少那个“盒子”的宽度？我试图在 b-nav-item-dropdown 中添加一些 CSS，但这只会弄乱整个导航栏。这是我的代码:

<div class="my-bg">
    <b-navbar toggleable="lg" fixed class="mx-5 navbar-mine">
        <div class="d-flex align-items-center justify-content-between">
            <b-navbar-toggle target="nav-collapse" class="navbar-toggler navbar-toggler-left" style="background-color:white"></b-navbar-toggle>

            <b-navbar-brand href="#" class="ml-5">
                 <b-img fluid src="/img/logo/Logo.png" width="220" height="110" class="mt-4 logo-mine"></b-img>
                    </b-navbar-brand>
                </div>


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

                    <b-navbar-nav class="ml-auto nav-items-mine">
                    <b-nav-item href="#">SERVICES</b-nav-item>
                        <b-nav-item href="#"  class="my-nav-link">CONTACT</b-nav-item>
                        <b-nav-item-dropdown text="LANGUAGE" class="lang-box" right>
                            <b-dropdown-item href="#"> <span class="flag-icon flag-icon-es align-middle"></span></b-dropdown-item>
                            <b-dropdown-item href="#"><span class="flag-icon flag-icon-us"></span></b-dropdown-item>
                        </b-nav-item-dropdown>
                </b-collapse>
            </b-navbar>
            <br>
            </div>

CSS

 .navbar-toggler {
            align-self: inherit;
            position: initial;
        }

        /* Media query for collapse button */
        @media (max-width: 990px) {
        .my-bg{
            background-color: #000032;
        }

        .navbar .navbar-brand{
            min-height:100px;
        }
        }

        @media (min-width: 991px) {
        .my-bg{
            background-color: #000032;
            min-height: 50px;
            max-height: 60px;
        }    
        }

        .navbar .navbar-nav .nav-link{
            color:white!important;
        }

        .navbar .navbar-nav{
            margin-top: -20px;
        }

        .navbar .navbar-brand{
            margin-top: -25px;
        }

        .navbar .navbar-toggle {
        background-color:#FF0000 !important;
        }

        .navbar-mine{
            font-family:Gotham;
            font-size:12px;
        }

        /* noone of these options worked
        .lang-box{
            width:50px;
        }


        .navbar .navbar-nav .navbar-nav-item-dropdown .lang-box{
            width:50px;
        }
       */

很抱歉没有提供代码片段，但每次我尝试编写 Bootstrap Vue 代码片段时它都无法正常工作

如果消息还不清楚，这是我想减少的东西

Answer 1

下拉菜单默认有一个最小宽度，这会导致额外的空间。将类应用到具有 min-width: 0; 样式的 Prop menu-class 会删除额外的间距。

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>