Question

我正在使用反应轮播及其演示代码。当我渲染组件时，指示器未正确对齐： http://imgur.com/a/lhxMS

我目前没有使用任何CSS，所以我不知道为什么会发生这种情况，除了html页面上包含的cdn。任何帮助将不胜感激。

> export default class Home extends Component {  constructor(props) {
>         super(props);
> 
>         this.state = {
>             photoIndex: 0,
>             isOpen: false
>         };
>     }
> 
>     render() {
>             const {
>             photoIndex,
>             isOpen,
>         } = this.state;
> 
> 
>   return(
>     <div>
> 
>            <Grid>
>     <Row >
>       <Col md={6} md={12}>
>         <Carousel>
>     <Carousel.Item >
>      <img   src="https://docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs"/>
> 
>     </Carousel.Item>
>     <Carousel.Item >
>       <img  src="https://docs.google.com/uc?id=0B0huBtqYaof7MVAySV9jME9TWWM"/>
> 
>     </Carousel.Item>
>     <Carousel.Item >
>       <img src="https://docs.google.com/uc?id=0B0huBtqYaof7N250S3JicmxxNmM"/>
> 
>     </Carousel.Item>
>         <Carousel.Item >
>       <img   src="https://docs.google.com/uc?id=0B0huBtqYaof7MDF5Vm1VYWhoY3M"/>
> 
>     </Carousel.Item>
>         <Carousel.Item >
>       <img  src="https://docs.google.com/uc?id=0B0huBtqYaof7X1ROMUxRMjVsN00"/>
>  
>     </Carousel.Item>   </Carousel> </Col> </Row> </Grid>
> 
> <Grid>   <Row>    <Col md={6} md={4} className={styles.topImage}>
>       <img src="http://placehold.it/291x363" onClick={() => this.setState({ isOpen: true })} />
>       {isOpen &&
>                     <Lightbox
>                         mainSrc={images[photoIndex]}
>                         nextSrc={images[(photoIndex + 1) % images.length]}
>                         prevSrc={images[(photoIndex + images.length - 1) % images.length]}
> 
>                         onCloseRequest={() => this.setState({ isOpen: false })}
>                         onMovePrevRequest={() => this.setState({
>                             photoIndex: (photoIndex + images.length - 1) % images.length,
>                         })}
>                         onMoveNextRequest={() => this.setState({
>                             photoIndex: (photoIndex + 1) % images.length,
>                         })}
>                     />
>                 }
>     </Col>   </Row>
> 
> 
> </Grid> </div>
> 
> 
>     ) } }

Answer 1

img代码应指定height和width

<img width={900} height={500} alt="900x500" src="/assets/carousel.png"/>

此width和height应该等于轮播维度。

React-Boostrap Carousel指示器未对齐

1 个答案: