Question

我尝试使Bootstrap轮播工作，但问题是轮播滑块之间会显示所有图像。我看不到我的代码有问题，一切似乎都正确。希望有人可以帮助我。

我正在研究wordpress主题，而轮播是针对画廊帖子格式的。我试过的是，将我的自定义css放在头部的bootstrap cs之上，然后轮播可以正常工作，但是我的自定义css不再正常工作，所以我不得不像应有的那样再次将自定义css放在我的bootstrap css之上。我不知道怎么了。

...
<article id="post-<?php the_ID(); ?>" <?php post_class( 'minimal-format-gallery' ); ?>>
    <header class="entry-header text-center">
        <?php if( minimal_get_attachment() ): 
            $attachments = minimal_get_attachment(3);
        ?> 
            <div id="post-gallery-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <?php 
                        $i = 0;
                        foreach( $attachments as $attachment ): 
                        $active = ( $i == 0 ? ' active' : '' );
                    ?>
                        <div class="carousel-item<?php echo $active; ?> background-image standard-featured" style="background-image: url( <?php echo wp_get_attachment_url( $attachment->ID ); ?> );"></div>
                    <?php $i++; endforeach; ?>
            </div><!-- .carousel-inner -->
                <a class="carousel-control-prev" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div><!-- .carousel -->
            <?php endif; ?>

Answer 1

问题出在您的CSS文件中，因为您定义了一个与引导类同名的类。您应该重命名自定义的CSS类或ID，并确保它与任何预定义的类或ID不匹配。我希望此后它能工作。如果问题仍未解决，请编辑您的问题并为我发表评论。

Bootstap轮播被自定义CSS覆盖，并显示所有图像

1 个答案: