带有填充的奇怪错误

Question

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

我认为它要么来自填充，要么来自边距，并且在某种程度上与 bootstrap 的网格有关。

代码结构：

<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;
}

带有填充的奇怪错误

Strange bug with padding

javascript

reactjs

bootstrap-4

bootstrap-grid