Twitter bootstrap React升降带转盘指示器未对齐

我正在使用react carousel和他们的演示代码。 渲染组件时，指示器未正确对齐：

我目前没有使用任何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>
> 
> 
>     ) } }

>导出默认类Home扩展组件{构造函数（props）{
>超级（道具）；
> 
>此.state={
>感光指数：0，
>伊索彭：错
>         };
>     }
> 
>render（）{
>常数{
>感光指数，
>伊索本，
>}=this.state；
> 
> 
>返回(
>     
> 
>            
>     
>       
>         
>     
>      
> 
>     
>     
>       
> 
>     
>     
>       
> 
>     
>         
>       
> 
>     
>         
>       
>  
>           
> 
>        
>this.setState（{isOpen:true}}/>
>{isOpen&&
>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({
>感光指数：（感光指数+图像.length-1）%images.length，
>                         })}
>onMoveNextRequest={（）=>this.setState({
>感光指数：（感光指数+1）%images.length，
>                         })}
>                     />
>                 }
>        
> 
> 
>  
> 
> 
>     ) } }

img标签应具有

高度

和

宽度

规定，如下所示

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

---

这个

宽度

和

高度

应该等于旋转木马的尺寸。

我已经将宽度和高度添加到img标签上，但我仍然得到相同的结果。你能贴一把小提琴或其他东西吗？