Bootstrap Gallery: сделайте его отзывчивым и добавьте модальные - PullRequest
Новая
       32

Bootstrap Gallery: сделайте его отзывчивым и добавьте модальные

0 голосов
/ 06 декабря 2018

Это второй раз, когда я прихожу сюда, я довольно новичок в программировании.Делайте все это в блокноте ... В настоящее время я пытаюсь создать адаптивную галерею начальной загрузки с модальностями.Когда я впервые сделал галерею, я думал, что она была отзывчивой и хорошо выглядела в мобильном представлении, но я подошел ближе и увидел полосу прокрутки в галерее.Вот две вещи, которые мне нужны:

1) Сделать всю галерею отзывчивой, избавиться от полосы прокрутки и убедиться, что изображения не растягиваются.

2) Я хочу добавитьмодальный, чтобы люди могли щелкнуть влево и вправо, ESC, чтобы отменить или нажать X.

Большое спасибо, и вот код:

Работает ли это предложение ,Изображения кажутся отзывчивыми, вся их галерея, кажется, не 

    <!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>
...