Geek asks and answers

Why doesn't .navbar mixin work in Bootstrap 2.3?

I am trying to convert the Bootstrap example of including a class in HTML to use LESS mixins. So far I have succeeded, but I have problems with my menu. I am currently using the following in my main .less file (I included bootstrap.less):

#container #menu {
    .navbar;
    .navbar-inverse;
    .navbar-fixed-top;

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

and the corresponding HTML:

<div id="container">
    <nav id="menu">
        <div><ul role="menu">
            <!--- ... -->
        </ul>
        </div>
    </nav>
</div>

Applied navbar-inverseand navbar-fixed-top, but navbaralso navdo not work.

+5
source share
1 answer

That means you don’t understand mixins.

I think your main problem is your self-proclaimed goal: "I'm trying to convert a Bootstrap example that includes a class in HTML to use LESS mixins."

, .navbar .nav ( ..) HTML, id . , .navbar-inverse .navbar-fixed-top ( , , ), , , - , .

- , navbar.less bootstrap. .navbar .nav, mixins , . , , - , . , :

.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}

.navbar .nav > li {
float: left;
}

// Links
.navbar .nav > li > a {
float: none;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}

. .navbar .nav HTML, #container #menu ul. .

, mixin , . strong > .

, , HTML, .

, . , , .navbar-fixed-top .navbar-inner HTML:

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
  border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left: 0;
  padding-right: 0;
  .border-radius(0);
}
+8

More articles:


All Articles