Javascript 有填充物的奇怪虫子

我用React和Bootstrap的Grid制作了一个简单的搜索应用程序。 问题是，当产品渲染时，它会使整个界面向左移动约10px。渲染4个或更多产品时会发生这种情况

我认为它要么来自于填充，要么来自于边距，某种程度上与引导的网格有关

代码结构：

<div className="container">
 <div className="row">
  <div className="col-md-3">Sidebar</div>
  <div className="col-md-9">
   <div className="row">
    <div className="col-md-9">Searchbar here</div>
    <div className="col-md-3">Cart</div>
    <div className="col-md-12">
     <div className="row">
      <div className="col-md-3">1 button here</div>
      <div className="col-md-2">2 button here</div>
      <div className="col-md-12">
       <div className="row">
        //here are rendered all products
        <div className="col-md-4">Product 1</div>
        ....
       </div>
      </div>
     </div>
    </div>
   </div>
 </div>
</div>

边栏
这里是搜索栏
运货马车
这里有一个按钮
这里有两个按钮
//这里是所有的产品
产品1
....

---

*我在使用搜索时也注意到了这个错误，这是因为在渲染超过一定数量的项目时会出现滚动条。你总是可以展示它来回避这个问题

body {
  overflow-y: scroll;
}

---

@Daeddad好吧，那太令人沮丧了。然后您可能需要使用

overflow-y:scroll在滚动条上的另一个元素上，它提供了滚动条。我在body上使用了它，它工作了，非常感谢！