При импорте bootstrap в реагирующий проект bootstrap скрываются элементы с абсолютным позиционированием - PullRequest
Новая
       5

При импорте bootstrap в реагирующий проект bootstrap скрываются элементы с абсолютным позиционированием

0 голосов
/ 08 марта 2020

В проекте React, созданном с помощью create-реакции-приложения, я установил bootstrap и response- bootstrap.

Моя цель - создать карусель с элементами с абсолютным позиционированием внутри s. К сожалению (чёрт возьми, мне пришлось много отлаживать, чтобы найти причину ошибки), если я импортирую bootstrap элементы не отображаются.

Вот минимальный компонент приложения, который показывает эту проблему: 

import React from "react";
import "./App.css";
import { Carousel, Container } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

function App() {
  return (
    <Carousel
      style={{
        height: "100% !important"
      }}
    >
      <Carousel.Item>
        <Container
          style={{
            backgroundColor: "blue",
            position: "absolute",
            right: "10px"
          }}
        >
          HELLO
        </Container>
      </Carousel.Item>
    </Carousel>
  );
}

export default App;

Комментируя импорт bootstrap 

//import "bootstrap/dist/css/bootstrap.css";

, элемент теперь обнаруживается.

Итак, мой вопрос - сначала "почему ???" и второе, как это исправить.

...