0

Проблема с вложенными .nav-таблетками в другой .nav-пилюли (с использованием bootstrap3). Может быть, его вложенный JS в таблетке?Bootstrap 3: проблема с вложенными .nav-таблетками

В принципе, я хотел бы создать единый веб-сайт с использованием встроенных таблеток JS nav для навигации по всему содержимому на одной странице. Двое из панелей содержат встроенный 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.

Смежные вопросы