Vue-Bootstrap组件具有精确的宽度

Question

我遇到了 bootstrap-vue navitem 的问题。我无法设置组件的 witdh ，因此当我更改网站的语言时，导航栏项会跳转。

这就是它的样子：

Language 1 Language 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%;
}

任何帮助都会很好。 谢谢。

Answer 1

您可以将样式传递给组件（它们将应用于组件的根元素）

implementation of regex

您还可以创建一个自定义类并应用它：

<b-nav-item right href="/" :style="{ minWidth: '20rem' }">
  {{ $t("header.Login_Header") }}
</b-nav-item>

.my-nav-item {
  min-width: 20rem;
}