css - 正確な幅の Vue-Bootstrap コンポーネント

Question

bootstrap-vue navitemに問題があります。コンポーネントの幅を設定できないため、ウェブサイトの言語を変更すると、ナビゲーション バーの項目が飛び回ります。

これは次のようになります。

言語 1 言語 2

コードは次のようになり、要素で幅を調整しようとした後、クラスを追加しましたが、まだ何も起こりませんでした

      <b-nav-item right href="/">
          {{ $t("header.Login_Header") }}
      </b-nav-item>

      <b-nav-item right href="/">
          {{ $t("header.Register_Header") }}
      </b-nav-item>

      <b-nav-item right href="/">
        {{ $t("header.LoginUser_Header") }}
      </b-nav-item>

        <b-nav-item right href="/"
        @click="logout">
          {{ $t("header.Logout_Header") }}
      </b-nav-item>

    </b-navbar-nav>


b-navbar-item{
    width: 5%;
}

どんな助けでもいいでしょう。ありがとうございました。