CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Durin
Durin

Reputation: 2150

Twitter bootstrap nav-stacked css not working

I am trying to achieve the stackable effect as shown here: http://twitter.github.com/bootstrap/components.html#navs

but somehow it is not working for me. Here is the link to a plunk that I have created: http://plnkr.co/edit/LSR3ijKGiOIyrYAbHm7g It just shows three list items one below another without the navbar effect of bootstrap.

<!doctype html>
<html>
<head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="row-fluid">
        <div class="offset4 span4">
            <ul class="nav nav-tabs nav-stacked">
                <li> Item1</li>
                <li> Item2</li>
                <li> Item3</li>
            </ul>
        </div>
    </div>
</body>
</html>

I must be doing some blunder that something as simple as nav-stacked is not working. Would be glad and grateful if someone could point out my mistake.

Upvotes: 2

Views: 5643

Answers (1)

implmentor
implmentor

Reputation: 1416

Put the content in anchors, like so:

<ul class="nav nav-tabs nav-stacked">
    <li class="active"><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a></li>
</ul>

Demo: http://jsfiddle.net/jpKAF/

Upvotes: 3

Related Questions