为什么我的Bootstrap选项卡无法在Wordpress中运行?

时间:2015-10-14 17:02:34

标签: jquery css wordpress twitter-bootstrap tabs

我正在将bootstrap标签转换为免费的Wordpress主题。一切都显示在页面上,选项卡列表项中的href属性与选项卡窗格中的id匹配,但它们不显示为选项卡或链接。我已经尝试了几个教程,堆栈溢出似乎还没有任何答案。我在本地开发,没有可链接的站点。我很感激任何建议。

这是我的标签代码

<section id="services">
    <div class="container-fluid">
        <div class="doc-h1 text-center">
            <?php the_title( '<h1>', '</h1>', $echo ); ?>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2  tabs" role="tabpanel">
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>   
                    <div class="col-xs-4 col-sm-12 ">
                        <!-- Nav tabs -->
                        <ul class="nav nav-justified" id="nav-tabs" role="tablist">
                            <li <?php if ( $the_query->current_post == 0 ): endif;?> role="presentation" >
                                <a href="#<?php echo $panel_id; ?>" role="tab" aria-controls="<?php echo $panel_id; ?>" data-toggle="tab">
                                    <?php $image = get_field('icon_image'); ?>
                                    <img class="img-circle" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <?php $panel_id++; endwhile;  wp_reset_postdata(); ?>

                    <?php $panel_id = 1; ?>
                    <div class="[ col-xs-8 col-sm-10 col-sm-offset-1 ]">
                        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                            <!-- Tab panes -->
                            <div class="tab-content" id="tabs-collapse">            
                                <div role="tabpanel" class="tab-pane fade in active wow animated fadeIn <?php if ( $the_query->current_post == 0 ): ?> in active <?php endif; ?>" id="<?php echo $panel_id; ?>">
                                    <div class="about-text tab-inner">  
                                        <hr>                  
                                        <?php the_title( '<h2 class="entry-title text-center lead">', '</h2>' ); ?>
                                        <p><?php the_field('description'); ?></p>
                                        <hr>             
                                    </div>
                                </div>
                            </div>
                        <?php $panel_id++; endwhile; wp_reset_postdata(); ?> <!-- end custom loop -->      
                    </div> 
            </div>
        </div>
    </div>
</section>

0 个答案:

没有答案