0

I'm trying to stretch the navbar link the end when the screen'width is greater than 1080px. But current bootstrap default navbar can only stretch until around 1080px. How should I make it till then end. I guess Bootstrap 4 uses flex system instead of grid. Maybe this is the reason I can't override it.

Current page

<template>
  <section>
      <b-navbar class="nonauth-bar" toggleable="lg" type="dark">
        <b-navbar-brand href="home"><img src="../assets/nobo_small.svg" alt="Nobo logo"></b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>

          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-item><router-link to="about" class="nav-link nav-link-grow-up">About</router-link></b-nav-item>
            <b-nav-item><router-link to="login" class="nav-link nav-link-grow-up">Login</router-link></b-nav-item>
            <b-nav-item><router-link to="signup" class="nav-link nav-link-grow-up">SignUp</router-link></b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
  </section>

zemunkh
  • 662
  • 7
  • 13
  • 2
    I think we need a MCVE https://stackoverflow.com/help/minimal-reproducible-example – AlexMA Mar 24 '20 at 15:48
  • 2
    `b-navbar`stretches 100% by default. You must've placed it inside something which is limiting its width. Probably an element with the class `container` – Hiws Mar 24 '20 at 15:56
  • Yeah, no container in there. I think ml-auto only stretches in a certain width. – zemunkh Mar 24 '20 at 16:03
  • ml-auto means margin-left auto – Troy Morehouse Mar 24 '20 at 17:35
  • 2
    You must have a style bound to `section` that is limiting it's width, or the navbar component is being placed inside a `b-container` or element with the container class, by the looks of it. – Troy Morehouse Mar 24 '20 at 17:37
  • What CSS rules are bound to class `noauth-bar`? What does Chrome Devtools inspector show as being rendered and the styles being applied? Are you using a 3rd party CSS theme? – Troy Morehouse Mar 24 '20 at 20:17
  • nonauth-bar class is just for background-color. But, section is inside of header container. That header container is inside of div container. – zemunkh Mar 25 '20 at 04:11
  • Problem is solved. It is because of navbar container is inside of another container. In vue.js, I think
    must be carefully used.
     – zemunkh Mar 25 '20 at 05:07
  • `
    ` doesn't have any style overrides in default Bootstrap v4 CSS (it's CSS rules are similar to `
    `).
     – Troy Morehouse Mar 25 '20 at 17:55

0 Answers0