ReactJS Bootstrap媒体查询CSS

Question

您好，为什么我在手机尺寸幻灯片上测试时无法更改媒体查询引导幻灯片很小，但什么都看不到，但是当我尝试添加类别并从CSS上更改自我时，只有宽度才会更改我无法更改高度，而Bootstrap的某些CSS正在阻止我的CSS。

main.css

import React from 'react';
import Carousel from 'react-bootstrap/Carousel';
import './css/Main.css';
import img1 from './img/slides/1.jpg'
import img2 from './img/slides/2.jpg'
import img3 from './img/slides/3.jpg'

function Main() {
  return (
    <Carousel className='slide'>
      <Carousel.Item interval={1000}>
        <img
          className="d-block w-100"
          src={img1}
          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 interval={500}>
        <img
          className="d-block w-100"
          src={img2}
          alt="Second 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={img3}
          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>
  );
}

export default Main;

main.css

@media all and (max-width: 500px) {
   .slide {
    width: 100%;
    height: 100%;
   } 
}

Answer 1

Bootstrap在他们的CSS课程中使用！将覆盖您的自定义课程。尝试在CSS声明中添加！重要的是或尝试将其添加为内联或ID。在特异性层次结构中，ID和内联样式更高。

如果那不起作用，请尝试使用开发工具来确保您正在设计正确的元素。