2014-01-06 46 views
0

在另一个.nav-pills(使用bootstrap3)中嵌套.nav-pills问题。也许它在药丸内容中嵌套的JS?Bootstrap 3:嵌套的.nav-pills问题

基本上我想创建一个单页面网站使用内置的JS导航药丸来导航一页上的所有内容。两个窗格包含内置的JS,也是一个家庭中的旋转木马和另一个导航药丸。

<ul class="nav nav-pills"> 
    <li><a href="#home" data-toggle="pill"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
    <li><a href="#menu" data-toggle="pill"><span class="glyphicon glyphicon-cutlery"></span> Menu</a></li> 
    <li><a href="#about" data-toggle="pill">About Us</a></li> 
    <li><a href="#contact" data-toggle="pill">Contact Us</a></li> 
    <li><a href="#directions" data-toggle="pill">directions</a></li> 
</ul><!-- End Nav pills --> 

<!-- pill panes --> 
<div class="pill-content"> 
    <div class="pill-pane active" id="home"> 

    <!-- Carousel --> 
    <div id="carousel-with-captions" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-with-captions" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-with-captions" data-slide-to="1"></li> 
     <li data-target="#carousel-with-captions" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item"> 
     <img src='img\carousel\N2.-Pad-Sea-Ewew.jpg' width="100%" alt="First slide image"> 
     <div class="carousel-caption"> 
      <h3>N2. Pad Sea Ewew (ผัดซีอิ๋ว)</h3> 
      <p>Stir fried thick rice noodles with egg, Chinese broccoli, broccoli and beansprouts in sweet black soy sauce.</p> 
     </div> 
     </div> 
     <div class="item active"> 
     <img src="C:\Users\Eduardo\Desktop\Pi's Thai\img\carousel\N1.-Pad-Thai.jpg" width="100%" alt="Second slide image"> 
     <div class="carousel-caption"> 
      <h3>N1. Pad Thai (ผัดไทย)</h3> 
      <p>Notably one of the best known Thai dish worldwide. Our Pad Thai is made with thin rice noodles stir fried with meat of your choice, egg, bean sprouts and green onions. Then topped with crushed peanuts and a side of lime to add some crunch and an extra zest!</p> 
     </div> 
     </div> 
     <div class="item"> 
     <img src="C:\Users\Eduardo\Desktop\Pi's Thai\img\carousel\N3.-Pad-Rard-Na.jpg" width="100%" alt="Third slide image"> 
     <div class="carousel-caption"> 
      <h3>N3. Pad Rard Na (ราดหน้า)</h3> 
      <p>Stir fried thick rice noodles topped with sautéd broccoli and Chinese broccoli in soybean paste brown soy gravy.</p> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#carousel-with-captions" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-with-captions" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div><!-- End Carousel --> 
    </div><!-- End Pill pane home --> 

    <div class="pill-pane" id="menu"> 

    <ul class="nav nav-pills"> 
     <li class="active"><a href="#Noodles" data-toggle="pill">Noodles</a></li> 
     <li><a href="#FriedRice" data-toggle="pill">Fried Rice</a></li> 
     <li><a href="#Entrees" data-toggle="pill">Entrees</a></li> 
     <li><a href="#Soups-Salads" data-toggle="pill">Soups &amp; Salads</a></li> 
    </ul> 
    <div class="pill-content"> 
    </div>   
    </div><!-- End Pill pane menu --> 

    <div class="pill-pane" id="about"> 
    <h3>about us</h3> 
    <p>we live in a crazy jungle</p> 
    </div><!-- End Pill pane about us --> 

    <div class="pill-pane" id="contact" 
    ></div><!-- End Pill pane contact us --> 

    <div class="pill-pane" id="directions" 
    ></div><!-- End Pill pane directions --> 
</div><!-- End Pill panes --> 
+2

哇...我读乌尔问题两次,仍然没有得到这个问题....头脑给了我们一个小提琴=> HTTP://jsfiddle.net/ ???? – NoobEditor

回答

1

两个类.pill-content.pill-pane不存在。

只需使用:

  • .tab-content而不是.pill-content
  • .tab-pane而不是.pill-pane

Bootstrap doc :

药丸采取相同的HTML [与标签],但使用.nav-pills