2

我正在尝试使用 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>
4

1 回答 1

2

如果您没有正确加载bootstrap.css文件，您将得到此行为。或者可能来自 LESS 的编译不包括navs.less文件。

否则，您的代码对我有用：

JSFiddle

于 2012-08-14T20:47:07.377 回答