如何为移动设备或桌面创建不同风格的图片库？答案

【问题标题】：How can I create different styled image galleries for mobile or desktop?如何为移动设备或桌面创建不同风格的图片库？
【发布时间】：2021-11-08 23:22:26
【问题描述】：

我正在尝试使用 React 创建一个非常简单的网站，然后使用 Bootstrap 进行样式设置。我有一个数据数组，其中包含我要显示的图像。

我希望能够通过此数组进行映射，并在桌面上以 2x2 网格显示图像，您可以在其中单击左/右箭头以查看下一组图像。而在移动设备上，我希望它只显示单个图像，您可以再次使用左/右箭头滚动图像。

最好的方法是什么？

【问题讨论】：

标签： reactjs react-bootstrap bootstrap-5

【解决方案1】：

给你...

只需使用 Bootstrap 网格系统。有不同的类：

如果您希望每行有两个等宽的列，请使用.col-6。但是使用.col-6 将在在所有设备上每行产生两个等宽的列。
如果您希望在桌面上每行有两个等宽的列，但在移动设备上每行只有一个列，则需要使用.col-md-6。李>

注意：您也可以使用.col-sm- 或.col-xs- 代替.col-md-。这些都是定义断点的类前缀，您的内容将在该断点处垂直向下堆叠。你可以阅读更多关于它的信息here。

请参阅下面的 sn-p。

.col-md-6 {
  border: 1px solid black;
  background-color: aqua;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <div class='container-fluid'>
    <div class='row'>
      <div class='col-md-6'>1</div>
      <div class='col-md-6'>2</div>
      <div class='col-md-6'>3</div>
      <div class='col-md-6'>4</div>
      <div class='col-md-6'>5</div>
      <div class='col-md-6'>6</div>
      <div class='col-md-6'>7</div>
      <div class='col-md-6'>8</div>
    </div>
  </div>

</body>

</html>

【讨论】：