Vue-Bootstrap Component with exact width

Question

I have an issue with bootstrap-vue navitem. I cannot set the witdh of the components, therefore when I change the language of my website the navbar items jump around.

This is what it looks like:

Language 1 Language 2

The code looks like this and i tried adjusting the width with element, then I added a class and still nothing happened

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

Any help would be nice. Thank you.

What have you tried? Code examples? stackoverflow.com/help/how-to-ask — jostrander
– jostrander, Commented Feb 13, 2018 at 18:56
It is my first question here, and I have got a suggestion, that I should remove the codes, so I did. But it is back again. — Peter Pšenák
– Peter Pšenák, Commented Feb 14, 2018 at 8:19
Your CSS rule has to target a valid html element, not a component. — m3characters
– m3characters, Commented Feb 14, 2018 at 8:31
Thank you Micael. This solved my problem. I had to style my li element. — Peter Pšenák
– Peter Pšenák, Commented Feb 14, 2018 at 8:48
@MicaelNussbaumer if you add it as an answer I will gladly accept it. — Peter Pšenák
– Peter Pšenák, Commented Feb 14, 2018 at 10:09

Troy Morehouse · Accepted Answer · 2019-07-31 04:13:11Z

1

You can pass styles to components (they will get applied to the root element of the component)

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

You could also createa custom class and apply it:

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

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

answered Jul 31, 2019 at 4:13

Troy Morehouse

5,4351 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue-Bootstrap Component with exact width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related