align-item-start在生产中开始中断，但在开发中起作用

如何解决align-item-start在生产中开始中断，但在开发中起作用

我是Web开发人员的新手，不太确定自己在做什么。我正在使用align-item-start来获取Card.ImgOverlay的内容以粘贴到卡的底部，如此link所示。我能够使我的代码在本地开发环境中正常运行。但是在进行netlify部署时，我看到了this。另外，我从onClick处理程序渲染了一个Modal，它在开发环境中看起来像this。但是，在生产中，它会以不可见的方式进行渲染（我不确定这是怎么回事），当我按esc键关闭渲染的Modal时，可以瞬间看到。

这是正在渲染的Card和Modal的代码

卡：

const CardHolder = (props) => {
  const { title,type,score,image_url } = props.show;

  const [isSummaryShown,setSummaryShown] = useState(false);

  return (
    <>
      <Card className="text-white border-0 col-xs-12 col-sm-12 col-md-12 col-lg-3 rounded-0 showImage">
        <Card.Img variant="top img-fluid " src={image_url} />
        <Card.ImgOverlay
          className="d-flex flex-column align-items-start show"
          onClick={() => setSummaryShown(true)}
        >
          <Badge variant="primary">{type}</Badge>
          <Badge variant="warning">{score}</Badge>
          <Card.Text className="mt-auto showTitle">{title}</Card.Text>
        </Card.ImgOverlay>
      </Card>
      <ShowSummary
        key={props.show.mal_id}
        show={isSummaryShown}
        onHide={() => setSummaryShown(false)}
        info={props.show}
      />
    </>
  );
};
export default CardHolder;

模式

const ShowSummary = (props) => {
  const { title,producers,synopsis,genres,image_url } = props.showInfo;

  var gapi = window.gapi;
  var CLIENT_ID = ConfigureInfo.CLIENT_ID;
  var API_KEY = ConfigureInfo.API_KEY;

  var DISCOVERY_DOCS = [
    "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",];

  var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";

  const handleClick = () => {
    gapi.load("client:auth2",() => {
      console.log("loaded client");

      gapi.client.init({
        apiKey: API_KEY,clientId: CLIENT_ID,discoveryDocs: DISCOVERY_DOCS,scope: SCOPES,});

      gapi.client.load("calender","v3",() =>
        console.log("something happened ^_^")
      );

      gapi.auth2.getAuthInstance().signIn();
    });
  };

  const getGenre = () => {
    return genres.map((genre) => (
      <Button variant="secondary" className="float-left">
        {genre.name}
      </Button>
    ));
  };

  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title>{title}</Modal.Title>
      </Modal.Header>
      <Modal.Body className="show-grid">
        <Container>
          <Row>
            <Col xs={12} md={4} lg={4}>
              <Image className="img-fluid" src={image_url} rounded />
            </Col>
            <Col xs={12} md={8} lg={8}>
              <p>
                Synopsis:<br></br> {synopsis}
              </p>
            </Col>
          </Row>
          <br></br>
          <Row>
            <Col xs={12} md={4} lg={4}>
              <p>Producers:{producers.name}</p>
            </Col>
          </Row>
        </Container>
      </Modal.Body>
      <Modal.Footer className="float-left">
        <p>Genre:</p>
        {getGenre()}
        <Button variant="primary" className="float-right" onClick={handleClick}>
          Set Event
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ShowSummary;

css

.show {
  position: relative;
  cursor: inherit;
}

.show:hover {
  cursor: pointer;
}
.showTitle {
  visibility: visible;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.showImage:hover {
  opacity: 0.75;
}

任何帮助将不胜感激