Question

这是我第二次来到这里，我是编码的新手。在记事本中完成所有操作...目前，我正在尝试制作具有模态的响应式引导库。当我第一次制作图库时，我认为它反应灵敏，并且在移动视图中看起来不错，但是我仔细检查了一下，发现图库中有一个滚动条。这是我需要做的两件事：

1）使整个图库具有响应性，以摆脱滚动条并确保图像不会拉伸。

2）我想添加一个模态，以便人们可以左右单击，用ESC取消或单击X。

非常感谢，这是代码：

执行suggestion work。图像似乎是响应式的，整个画廊似乎都不是

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Casa En El Mirador</h2>
  <p>Hermosa casa en Calle El Mirador. Colores solidos que complementan perfectamente a los muebles brindan una sensación de espacio amplio a la casa.</p>
  <p><b>Dimensiones:</b> 850 v2, 325 metros</p>
  <p><b>Precio:</b> $280000</p>
 <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=15zMpMGqF_DLH8L_v_-6nTtbnkAgCqiWv" style="width:100%">
                        </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=1LkGTg2LAV8ZwILk9wnvL4xCqHFG07IUd" style="width:100%">
               </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=1W3tWmRVLNW6Lla5MzTbQfPwRHGaiNrsS" style="width:100%">

      </div>
    </div>
 <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=1kMCtZMl10PM9Qd-EBtPv2vhzv71KnSf_" style="width:100%">

      </div>
    </div>
 <div class="col-md-4">
      <div class="thumbnail">
                 <img src="https://drive.google.com/uc?export=view&id=1NuBTpz_1ErHBbAQYFSPb3hTH-mSsuScd" style="width:100%">
                </div>
    </div>
 <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=14IGV5QdbPtUJjlswwrvYoseFnoiKl0yo" style="width:100%">

      </div>
    </div>
 <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=1jbH0Pzx9IXhVW8o7mPs31YspLduLwD-M" style="width:100%">
                        </div>
    </div>
 <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=1Xn1b1Va_wRHhBgRhuYaK_TxZEbhUyZOD" style="width:100%">
                </div>
    </div>
 <div class="col-md-4">
      <div class="thumbnail">
                  <img src="https://drive.google.com/uc?export=view&id=1P2dtrpAtB8r19EE76QpwX6HbLu4hAOpH" style="width:100%">
              </div>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap Gallery：使其具有响应性并添加模态

0 个答案: