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

Question

我对 bootstrap-vue navitem 有疑问。我无法设置组件的 witdh，因此当我更改我网站的语言时，导航栏项目会跳来跳去。

这是它的样子：

Language 1 Language 2

代码看起来像这样，我尝试用元素调整宽度，然后我添加了一个 class 仍然没有任何反应

      <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

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

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

您还可以创建自定义 class 并应用它：

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

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

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

Vue-Bootstrap Component with exact width

css

vue.js

bootstrap-vue