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

【问题标题】：Vue-Bootstrap Component with exact width具有精确宽度的 Vue-Bootstrap 组件
【发布时间】：2018-07-23 21:58:56
【问题描述】：

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

这就是它的样子：

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

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

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

【问题讨论】：

你试过什么？代码示例？ stackoverflow.com/help/how-to-ask
这是我的第一个问题，我有一个建议，我应该删除代码，所以我做了。但它又回来了。
您的 CSS 规则必须针对有效的 html 元素，而不是 component。
谢谢米卡尔。这解决了我的问题。我必须为我的 li 元素设置样式。
@MicaelNussbaumer 如果您将其添加为答案，我将很乐意接受。

标签： css vue.js bootstrap-vue

【解决方案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>

【讨论】：