2013-03-18 3 views
2

Я пытаюсь добиться штабелируемого эффекта, как показано здесь: http://twitter.github.com/bootstrap/components.html#navsTwitter самозагрузка нав стеки CSS не работает

но почему-то не работает для меня. Вот ссылка на плунжер, который я создал: http://plnkr.co/edit/LSR3ijKGiOIyrYAbHm7g Он просто показывает три элемента списка один под другим без эффекта навигатора бутстрапа.

<!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> 

Должно быть, я ошибаюсь, что что-то простое, как nav-stacked, не работает. Был бы рад и благодарен, если бы кто-нибудь мог указать на мою ошибку.

ответ

2

Поместите содержимое в якорях, например, так:

<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> 

Демо: http://jsfiddle.net/jpKAF/

+0

Спасибо! Разве нет способа иметь простой текст вместо тегов привязки? – Durin

+1

Не из коробки, насколько я знаю, вы, вероятно, можете заставить ее работать, если вы удалите «.nav-tabs.nav-stacked> li> a», чтобы просто «.nav-tabs.nav-tacked> li ». Я обновил JSFiddle с помощью CSS, который я вытащил из Bootstrap, и просто конкатенировал все, что было применено к привязке, и вместо этого применил его только к элементу списка. Не уверен, что это то, что вы имели в виду. – bleakgadfly

+0

Еще раз спасибо. Вы ответили на все мои вопросы. :) – Durin