2014-01-06 94 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