css - bootstrap 第二轮播 其他 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 进行 Bootstrap 。有没有人可以帮我解决这个问题？

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>

希望你明白我的意思