<div>
<carousel>
<slide>
<img src="ny.jpg" alt="First slide">
<div class="caption">
<h4>Launch of Mount Eliza </h4>
</div>
</slide>
<slide>
<img src="chicago.jpg" alt="Second slide">
<div class="caption">
<h4>Launch of Mount Eliza </h4>
</div>
</slide>
<slide>
<img src="mex.jpg" alt="Third slide">
<div class="caption">
<h4>Launch of Mount Eliza </h4>
</div>
</slide>
</carousel>
</div>
Я пробовал много решений, чтобы отрегулировать ширину карусели. Но это происходит. Я хочу, чтобы карусель растягивалась по всей ширине страницы. Я также хочу избавиться от белого пространства между панелью навигации и каруселью. Как этого добиться?
Примечание: у меня есть заголовок навигационной панели над этой каруселью, и я делаю карусель как отдельный компонент. Так что я думаю, что установка HTML тела на 100% не будет работать. Потому что у меня есть еще несколько разделов под каруселью. Я не могу установить ширину вручную на несколько%, потому что я хочу, чтобы она была отзывчивой. Я попробовал приведенный ниже код, и он не работал.
.carousel
width: 100%;
margin: auto;
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}