使用全宽均匀划分为一些组件，是否出现最大宽度

【问题标题】：use full width evenly devided into some components with whether max-width occur使用全宽均匀划分为一些组件，是否出现最大宽度
【发布时间】：2021-10-14 19:54:09
【问题描述】：

在我的代码中，我添加了组件（产品），我希望它们使用容器的全宽。如果出现一个组件，则使用全宽，如果出现 2 个/超过 2 个，则均匀使用整个宽度。

  <div className="container mb-5">
     <img src="picture1.jpeg" alt="amazon_image" className="home__img" />
         <div className="row">
            <div className="col-10 mx-auto">
               <div className="row gy-2">
                  <Product/>
               </div>
             </div>
         </div>
         <div className="row">
           <div className="col-10 mx-auto">
             <div className="row gy-2">
                 <Product/>
                 <Product/>
                 <Product/>
              </div>
            </div>
         </div>
    </div>

这是给定 HTML 代码的 CSS 部分。

.home__img{
   max-width: 100%;
   height: auto;
   z-index: -1;
   margin-bottom: -180px;
   mask-image:linear-gradient(to bottom , rgb(0,0,0,1) , rgb(0,0,0,0));
}

my home page view

expected homepage view

【问题讨论】：

标签： html css reactjs grid bootstrap-5

【解决方案1】：

如您所知，row 中有 12 个column。使用class="col" 将自动为每个div 分配12 个column。例如，如果在row 中有 1 个div，它将使用您所有的column。如果您有 2 个div，则每个将使用 6 个column。在您的代码上：

<div className="row">
        <div className="col-10">
        </div>
</div>

它将使用总共 12 个中的 10 个column。改为使用：

<div className="row">
        <div className="col">
        </div>
<div>

【讨论】：