内联显示mdbootstrap级联卡

Question

大家好,

我正在建立一个使用react js的网站。现在我想使用react js内联显示三个mdbootstrap级联卡。

这里是一个screenshot

Belove代码：(请注意，在此页面上有一个导航栏、视频转盘、级联卡和页脚)。

​

import React, { Component } from 'react';
import { Container, CarouselIndicator, Row, Col, CardTitle, CardText, CardBody, CardImage, Button, Card, CarouselIndicators, Carousel, CarouselControl, CarouselInner, CarouselItem } from 'mdbreact';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.prev = this.prev.bind(this);
    this.state = {
      activeItem: 1,
      maxLength: 3
    };
  }

  next() {
    const nextItem = this.state.activeItem + 1;
    if(nextItem > this.state.maxLength) {
      this.setState({ activeItem: 1 });
    } else {
      this.setState({ activeItem: nextItem });
    }
  }

  prev() {
    const prevItem = this.state.activeItem - 1;
    if(prevItem < 1) {
      this.setState({ activeItem: this.state.maxLength });
    } else {
      this.setState({ activeItem: prevItem });
    }
  }

  goToIndex(item) {
    if (this.state.activeItem !== item) {
      this.setState({
        activeItem: item
      });
    }
  }

  render(){
    const { activeItem } = this.state;
    return(
        <div>
            <Carousel 
              activeItem={this.state.activeItem}
              next={this.next}
              className="z-depth-1">
              <CarouselInner>
                <CarouselItem itemId="1">
                  <video className="video-fluid d-block" autoPlay loop>
                    <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
                  </video>
                </CarouselItem>
                <CarouselItem itemId="2">
                  <video className="video-fluid d-block" autoPlay loop>
                    <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
                  </video>
                </CarouselItem>
                <CarouselItem itemId="3">
                  <video className="video-fluid d-block" autoPlay loop>
                    <source src="https://mdbootstrap.com/img/video/Agua-natural.mp4" type="video/mp4" />
                  </video>
                </CarouselItem>
              </CarouselInner>
              <CarouselControl direction="prev" role="button" onClick={() => { this.prev(); }} />
              <CarouselControl direction="next" role="button" onClick={() => { this.next(); }} />
            </Carousel>
            <Container>
        <h4 className="mt-5 mb-2">Multi-item Carousel</h4>
        <Carousel 
          multiItem
          activeItem={this.state.activeItem}
          next={this.next}>
          <div className="controls-top">
            <CarouselControl iconLeft className="btn-floating" direction="prev" role="button" onClick={() => { this.prev(); }} />
            <CarouselControl iconRight className="btn-floating" direction="next" role="button" onClick={() => { this.next(); }} />
          </div>
          <CarouselIndicators>
            <CarouselIndicator active={activeItem === 1 ? true : false} onClick={() => { this.goToIndex(1); }}></CarouselIndicator>
            <CarouselIndicator active={activeItem === 2 ? true : false} onClick={() => { this.goToIndex(2); }}></CarouselIndicator>
            <CarouselIndicator active={activeItem === 3 ? true : false} onClick={() => { this.goToIndex(3); }}></CarouselIndicator>
          </CarouselIndicators>
          <CarouselInner>
            <Row>
              <CarouselItem itemId="1">
                <Col md="4">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col md="4" className="clearfix d-none d-md-block">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col md="4" className="clearfix d-none d-md-block">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
              </CarouselItem>
              <CarouselItem itemId="2">
                <Col md="4">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col md="4" className="clearfix d-none d-md-block">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col md="4" className="clearfix d-none d-md-block">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
              </CarouselItem>
              <CarouselItem itemId="3">
                <Col md="4">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col md="4" className="clearfix d-none d-md-block">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
                <Col md="4" className="clearfix d-none d-md-block">
                  <Card className="mb-2">
                  <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg" />
                    <CardBody>
                      <CardTitle>Card title</CardTitle>
                      <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                      <Button color="primary">Button</Button>
                    </CardBody>
                  </Card>
                </Col>
              </CarouselItem>
            </Row>
          </CarouselInner>
        </Carousel>
      </Container>
      </div>
    );
  }
}

​

谁能帮帮我？

谢谢,

尼科

Answer 1

在我的例子中，带有多个项目的旋转木马是pro版本的一个功能。但是，我试图用免费版本解决这种情况，发现Row和Col组件在这种情况下不起作用。

因此，我删除了它，并用以下命令包装了CarouselItem中的卡片组件

<div style={{flexDirection: "row"}}> ... </div>

我希望这能对你有所帮助。