#reactjs #bootstrap-4 #carousel #react-bootstrap
#reactjs #bootstrap-4 #карусель #react-bootstrap
Вопрос:
Я просто пытаюсь отобразить очень простую прямую карусель.
Но это даже не рендеринг должным образом. Очевидно, я мог бы упустить что-то очень глупое. Он рендерит все изображения вместе по вертикали. Также индикатор не выровнен должным образом. Требуется ли какой-либо CSS. Если да, то откуда я могу это получить.
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=First slideamp;bg=373940"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slideamp;bg=282c34"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slideamp;bg=20232a"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>;
Пожалуйста, помогите мне, я полностью застрял в этой проблеме.
Любая помощь будет действительно оценена.
Спасибо
Комментарии:
1. Не могли бы вы приложить скриншот того, как рендерятся изображения и какие ошибки отображаются в вашей консоли?
2. @WaterTrash Ошибки нет.
Ответ №1:
Вам необходимо включить файл начальной загрузки:
import 'bootstrap/dist/css/bootstrap.min.css';
Более подробная информация здесь:https://github.com/react-bootstrap/react-bootstrap/issues/3691