如何在某些 window 尺寸上强制 flex-row 进入 2x2 网格？

Question

我对 react-bootstrap 不是很有经验。我正在处理这段代码，它在 flex-row:

中呈现四个按钮

renderBoxes(boxes) {
        return Object.keys(boxes).map((key, index) => {
            var box = boxes[key];
            return <div className="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-12 d-flex flex-row" key={index}>
                <IconBox
                    key={index}
                    title={box.title}
                    description={box.description}
                    icon={box.icon}
                    link={box.link}
                />
            </div>
        });
    }

<div className="row d-flex flex-row">
    {this.renderBoxes(boxes)}
</div>

在 lg window 宽度下，按钮如下所示：

在 md window 宽度下，按钮在 2x2 网格中看起来像这样：

但是，在 sm window 宽度时，按钮开始显示一个在另一个之上：

我想强制按钮在所有屏幕尺寸（包括 md 和小于 md 的尺寸下都保持在 2x2 网格中。有什么办法可以做到这一点？我似乎无法弄清楚。

Answer 1

您所要做的就是为较大的设备提供 class 的 col-lg-3，然后是第二个 class col-6，仅此而已。因此，当屏幕小于 lg 时，按钮将始终保留在 2x2 网格中，永远不会落入单列。

renderBoxes(boxes) {
  return Object.keys(boxes).map((key, index) => {
      var box = boxes[key];
      return <div className="col-lg-3 col-6 d-flex flex-row" key={index}>
          <IconBox
              key={index}
              title={box.title}
              description={box.description}
              icon={box.icon}
              link={box.link}
          />
      </div>
  });
}

<div className="row">
{this.renderBoxes(boxes)}
</div>

我还想告诉你一件事

xs 现在已从 bootstrap 中删除，因此您可以使用 col-6 而不是 col-xs-6

所以将来如果您设置不同 resolution devices 那么您可以这样做

<div class=" col-lg-4 col-md-6 col-sm-6 col-12"> some text </div>

如何在某些 window 尺寸上强制 flex-row 进入 2x2 网格？

How to force flex-row into 2x2 grid on certain window size?

row

flexbox

reactjs

react-bootstrap