Bootstrap zweite Karussell andere CSS-Regeln

Question

Ich habe das Bootstrap-Karussell zum Anzeigen von Bildern verwendet. Aber auf der gleichen Seite habe ich zwei verschiedene Karussells. Jetzt möchte ich dem einen Karussell andere CSS-Regeln geben als dem zweiten. Aber wenn ich den einen ändere, wird der zweite die gleichen CSS-Regeln machen. Dies ist mein Code:

<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(); ?> 

Und meine CSS-Datei:

#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 

Für CSS i SASS verwendet. Ich habe bootstrap include mit einer URL von getbootstrap.com. Gibt es jemanden, der mir dabei helfen kann?

Answer 1

Sie benötigen, um Ihre CSS mit anderen Klasse oder ids

wie

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


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

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

hoffen, dass Sie meinen Punkt bekam