在反应应用程序中添加了不必要的水平滚动条

Question

我正在尝试在我的 react 应用程序中使用 react-bootstrap 添加轮播。我们的想法是有一个黑色背景的容器，旋转木马应放置在其中，如下所示

必需的容器

但是在我创建了一个黑色背景 div 之后，在底部创建了一个额外的水平滚动条，就像这样

产生错误

我不知道水平滚动条是从哪里来的。这里我附上了JS组件代码和与之相关的css。

import React from 'react'
import './SlideShow.css'
const SlideShow = () => {
    return(
        <div className = 'slide-container'></div>
    )
}

export default SlideShow

CSS：

.slide-container{
    width : 100vw;
    height : 50vh;
    background: #050505;
    overflow : hidden;
}

请帮我解决这个问题。提前谢谢你。

Answer 1

您可能尚未重置 body 边距（例如，在当前 Chrome 中默认为 8px）。

两种解决方案：

body { margin: 0; }

或

.slide-container { width: calc(100vw - 2 * 8px); }