带填充的奇怪错误

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>

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

Answer 1

那是因为当您渲染超过一定数量的项目时会出现滚动条。您可以随时显示它来解决此问题。

body {
  overflow-y: scroll;
}