在 React 中使用 Bootstrap 显示响应式画廊答案

【问题标题】：Using Bootstrap in React to display a responsive gallery在 React 中使用 Bootstrap 显示响应式画廊
【发布时间】：2021-12-20 23:34:47
【问题描述】：

我想使用React 和Bootstrap 显示响应式图片库。我希望在小型设备上每个 row 有 2 个 columns 在中型和大型设备上每行 3 列。目前我的物品很快就换到下一行，最后一列是空的。任何想法我的引导程序有什么问题？

这是我的代码：

        return(
        <div className='App'>
          <h2> View Images </h2>
          <div className='container-fluid' >
            <div className='row'>
              {
                rounds.map((item,index)=>{
                  return(
                    <div key={index} className='col-sm-6 col-md-4'>
              
                    <img src={item.url} 
                          alt={`image_${item.url}`}
                          height="200" 
                      />
                    <br />ID:  {item.id}
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
      )

这是我的屏幕Bootstrap rows and columns

我可以看到我的行被分成 2 列，但是第二列没有按预期填充图像，而是图像换行到下一行

【问题讨论】：

它是否在更大的屏幕宽度上显示 2 列中的图像？
@Zim。是的，每行在大屏幕上显示 2 张图像（而不是 3 张），如果我添加另一个响应断点，例如 col-lg-3，每行将显示 3 张图像（而不是 4 张）
那么在多大的屏幕宽度上将它们显示在单列中？
目前，它们在小型设备（移动设备）上显示在单个列中，但根据我的“className”属性，我希望在小型设备上显示 2 个图像列。我从不想要一个专栏。

标签： reactjs bootstrap-5

【解决方案1】：

使用col-6 代替col-sm-6...

   return(
        <div className='App'>
          <h2> View Images </h2>
          <div className='container-fluid' >
            <div className='row'>
              {
                rounds.map((item,index)=>{
                  return(
                    <div key={index} className='col-6 col-md-4'>
              
                    <img src={item.url} 
                          alt={`image_${item.url}`}
                          height="200" 
                      />
                    <br />ID:  {item.id}
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
    )

【讨论】：

不幸的是，这并不能解决问题。当我将鼠标悬停在 ClassName = "row" 的 div 元素上时，我仍然可以看到 2 列，但只有第一列填充了图像。