引导第二个轮播其他 css 规则

Question

我使用 Bootstrap 轮播来显示图像。但在同一页面上，我有两个不同的轮播。现在我想给一个轮播提供其他 CSS 规则而不是第二个。但是当我改变一个时，第二个将执行相同的 css 规则。这是我的代码：

<div id="myCarousel_port" class="carousel_port">
<div class="carousel-inner" id="carousel_portfolio">
<?php
$args = array (
    'posts_per_page' => 1,
    'post_type' => array('post','werk')
  );
  $home_recent = new WP_Query( $args );
  if( $home_recent ->have_posts() ) :
  while( $home_recent ->have_posts() ) :
  $home_recent ->the_post(); 
    $post_type = get_post_type( $post->ID );
  $image = get_field('foto');
  //Voor de eerste active item te tonen ?>
  <div class="item active">
  <img src="<?php echo $image['url']; ?>" width="100%">
  <p><?php the_field('materiaal'); ?></p>
   <p><?php the_field('afmetingen'); ?></p>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>

还有我的 CSS 文件：

#carousel_portfolio
width: 100%
min-height: 70vh
text-align: right
text-indent: 10px

.carousel_port
width: 60%
min-height: 50vh
margin-left: 20%
margin-top: 2px

对于 CSS，我使用 SASS。我已经使用来自 getbootstrap.com 的 url 引导包含。有没有人可以帮我解决这个问题？

Answer 1

您需要使用不同的类或 id 应用您的 css

喜欢

.carousel1 img{
  width: 100%;
}
.carousel2 img{
  width: 80%;
}


<div class="carousel1">
   <img src="someimg.jpg">
</div>

<div class="carousel2">
   <img src="someimg.jpg">
</div>

希望你明白我的意思