Bootstrap and LESS - navbar

Hi,

I’m having an hard time understanding what is going on on my code.

I have the following piece of html:

<body>
    <main>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
   </main>
</body>

I am using LESS to apply boostrap classes on the html.

My less file is like this:

@import "bootstrap/bootstrap.less";

main{
  .container-fixed();
}

nav{
  .navbar;
  .navbar-default;
}

nav ul{
  .nav;
  .navbar-nav;
}

Which gives me this result:

Looking good. However, shouldn’t this alternative give the exact same result:

@import "bootstrap/bootstrap.less";
main {
    .container-fixed();
}
nav {
    .navbar;
    .navbar-default;
    ul {
        .nav;
        .navbar-nav;
    }
}

Notice that the difference is that I nested the ul inside the nav rule. From what I read that is supposed to work in LESS. However, the result is the following:

So, what is going on? Shouldn’t both the less stylesheets provide the same result?

1 Like