Компонент Vue-Bootstrap с точной шириной

У меня проблема с bootstrap-vue navitem. Я не могу установить witdh для компонентов, поэтому, когда я меняю язык своего веб-сайта, элементы навигационной панели меняются местами.

Вот как это выглядит:

Язык 1 Язык 2

Код выглядит так, и я попытался отрегулировать ширину с помощью element, затем добавил класс, но все равно ничего не произошло.

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

Любая помощь была бы хороша. Спасибо.


vue.js css bootstrap-vue
person Peter Pšenák    schedule 13.02.2018    source источник
comment
Что ты пробовал? Примеры кода? stackoverflow.com/help/how-to-ask   -  person jostrander    schedule 13.02.2018
comment
Это мой первый вопрос, и у меня есть предложение удалить коды, что я и сделал. Но он снова вернулся.   -  person Peter Pšenák    schedule 14.02.2018
comment
Ваше правило CSS должно нацеливаться на действительный элемент html, а не на component.   -  person m3characters    schedule 14.02.2018
comment
Спасибо, Микаэль. Это решило мою проблему. Мне пришлось стилизовать элемент li.   -  person Peter Pšenák    schedule 14.02.2018
comment
@MicaelNussbaumer, если вы добавите его в качестве ответа, я с радостью приму его.   -  person Peter Pšenák    schedule 14.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете передавать стили компонентам (они будут применены к корневому элементу компонента)

<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>
person Troy Morehouse    schedule 31.07.2019