图片库不适合移动视图

Question

我正在使用图片库，并且可以正常运行，除非我尝试在移动视图中对其进行检查。 这是图片： 如您所见，右侧有一条白线： https://i.gyazo.com/8e2d4bef588bd5366bf4b2d519938cb5.png

当我向下滚动时，导航栏的一半消失了： https://i.gyazo.com/6c51c69f85e0d7fca78d2bef86a82509.png

当我向上滚动时，“跳到顶部”按钮的一半消失了： https://i.gyazo.com/799a5bb031298e367b3462771d286cba.png

此外，当我单击图库的任何图像时，模态也会出现相同的问题： https://i.gyazo.com/4928e4204d622070dc0b3b1cf0d6e1e8.mp4

<section class="portfolio" id="portfolio">
 <div class="container">
   <h2 class="text-center text-uppercase text-secondary mb-0">Galéria</h2>
   <hr class="line2">
<div class="row">
 <div class="row">
       <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="img/galeria/1.jpg"
     data-target="#image-gallery">
  <img class="img-thumbnail"src="img/galeria/1.jpg"alt="Another alt text"></a>
     </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
                     data-image="img/galeria/2.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/2.jpg"
                           alt="Another alt text">
                  </a>
              </div>

              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
                     data-image="img/galeria/3.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/3.jpg"
                           alt="Another alt text">
                  </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/4.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/4.jpg"
                           alt="Another alt text">
                  </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/5.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/5.jpg"
                           alt="Another alt text">
                  </a>
              </div>

              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/6.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/6.jpg"
                           alt="Another alt text">
                  </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/1.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/1.jpg"
                           alt="Another alt text">
                  </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/2.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/2.jpg"
                           alt="Another alt text">
                  </a>
              </div>



              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/3.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/3.jpg"
                           alt="Another alt text">
                  </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/4.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/4.jpg"
                           alt="Another alt text">
                  </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Cím"
                     data-image="img/galeria/5.jpg"
                     data-target="#image-gallery">
                      <img class="img-thumbnail"
                           src="img/galeria/5.jpg"
                           alt="Another alt text">
                  </a>
              </div>
          </div>


          <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h4 class="modal-title" id="image-gallery-title"></h4>
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                          </button>
                      </div>
                      <div class="modal-body">
                          <img id="image-gallery-image" class="img-responsive col-md-12" src="">
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                          </button>

                          <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                          </button>
                      </div>
                  </div>
              </div>
          </div>
    </div>
  </div>
  </section>