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

你能帮忙的话，我会很高兴。谢谢你。

Answer 1

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

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

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

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

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