带有填充的奇怪错误

Question

我使用 React 和 Bootstrap 的 Grid 制作了一个简单的搜索应用程序。 问题是，当产品渲染时，它会使整个界面向左移动约 10 像素。当渲染 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>

*我在使用搜索时也注意到feathericons.com 上的这个错误

Answer 1

这是因为当您渲染超过一定数量的项目时会出现滚动条。你总是可以展示它来解决这个问题。

body {
  overflow-y: scroll;
}