Question

我正在尝试使用Twitter Bootstrap的药丸导航，但它无法正常工作。

我的“标签内容”中添加了“活动”类。然而，就是这一切 - 我实际上并没有看到任何内容的任何变化。所有内容都按顺序显示，而不是包含在选项卡窗格中。

这是PHP。请注意，我只是在头文件中包含bootstrap.js。

<section id="about" class="section tabbable">
    <!-- Section Title -->
    <?php echo '<h2>' . $section->post_title . '</h2>'; ?>

    <!-- Subsection Title Navigation -->
    <?php if (!empty($section_children)){ //if other sections exist, add them
            echo '<ul class="nav nav-pills" id="an">';
            echo '<li class="active">' . '<a data-toggle="pill" href="#' . $section->post_name . '-content">' . $section->post_title . '</a></li>';

            foreach($section_children as $subsection){
                echo '<li>' . '<a data-toggle="pill" href="#' . $subsection->post_name . '">' . $subsection->post_title . '</a></li>';
            }
            echo '</ul><!--"/.nav-pills"-->';   
          }?>

    <div class="contentArea tab-content">
  <?php echo '<article class="contents tab-pane active" id="' . $section->post_name . '-content">' . apply_filters('the_content', $section->post_content) . '</article><!-- /.contents -->';?>

  <?php if (!empty($section_children)){ //if other sections exist, add them
            foreach($section_children as $subsection){
                echo '<div class="contents tab-pane" id="' . $subsection->post_name . '">';
                echo '<h2>' . $subsection->post_title . '</h2>';
                echo '<article>' . apply_filters('the_content', $subsection->post_content) . '</article></div><!-- /.contents -->';
            }   
        }?>
    </div><!-- /.contentArea -->
</section><!-- /.section -->

我知道为什么我的内容总是可见而且没有包含在标签窗格中？

编辑：可能更容易查看生成的HTML：

<section id="about" class="section tabbable" style="height: 743px; ">
    <!-- Section Title -->
    <h2>About</h2>      
    <!-- Subsection Title Navigation -->
    <ul class="nav nav-pills" id="an">
        <li class=""><a data-toggle="pill" href="#about-content">About</a></li>
        <li class="active"><a data-toggle="pill" href="#execs">Your Executives</a></li>
        <li class=""><a data-toggle="pill" href="#governing-documents">Governing Documents</a></li>
    </ul><!--"/.nav-pills"-->   
    <div class="contentArea tab-content">
        <div class="contents tab-pane" id="about-content" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->
        </div><!-- /.contents -->     
        <div class="contents tab-pane active" id="execs" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->       
        </div><!-- /.contents -->
        <div class="contents tab-pane" id="governing-documents" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->
        </div><!-- /.contents -->       
    </div><!-- /.contentArea -->
</section>

Answer 1

如果您未正确加载 bootstrap.css 文件，则会出现此行为。或者LESS的编译可能不包括 navs.less 文件。

否则，您的代码适用于我：

使用丸导航为Twitter Bootstrap

1 个答案:

JSFiddle