引导轮播被自定义 css 覆盖并显示所有图像

Question

我试图让 Bootstrap 轮播来工作，但问题是轮播滑块显示了所有图像。我看不出我的代码有什么问题，一切似乎都是正确的。

我正在开发一个 wordpress 主题，而轮播用于画廊发布格式。我尝试的是，我将自定义 css 放在头部的引导 css 上方，然后轮播工作正常，但我的自定义 css 不再正常工作，所以我不得不再次将自定义 css 放在引导 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 不匹配。我希望在那之后它会起作用。如果问题没有解决，请编辑您的问题并给我留言。