Question

麻烦在另一个.nav-pills（使用bootstrap3）中嵌套.nav-pills。也许它是在丸内容中嵌套的JS？

基本上我想创建一个单页网站，使用内置的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 -->

Answer 1

类.pill-content和.pill-pane都不存在。

只需使用：

.tab-content代替.pill-content
.tab-pane代替.pill-pane

<强> Bootstrap doc :

Pills采用相同的HTML [作为标签]，但改为使用.nav-pills。

Bootstrap 3：嵌套.nav-pills麻烦

1 个答案: