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。我的bootstrap包含了來自getbootstrap.com的網址。有沒有人可以幫助我呢？

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> 

希望你有我的觀點