模态的

模态的

关注
发信
关注(28)粉丝(399)

html - 具有模态的部分伸出行

我有一个包含三个图像模态的部分。打开模态的按钮是照片。我的问题是，为什么三个图像按钮在屏幕上伸展？引导程序始终会插入的行两侧的自动边距发生了什么？它像行被拉长了。这是我的HTML

<section class="section2">
    <div class"container">
        <div class="row">
            <div class=" col-md-10 col-md-offset-1 section2Text">
                <h2 class="text-center">Stock Footage</h2>
                <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nunc nec enim fringilla convallis at et neque. Maecenas vitae tortor porttitor, sollicitudin lorem nec, cursus est. Mauris vel ligula ac sapien pulvinar tempor. Nullam rutrum finibus nisl, sed euismod mi placerat id.</p>
            </div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog mDialogPhoto" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/mainPhoto1LG.jpg'/>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog mDialogPhoto" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/mainPhoto2LG.jpg'/>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog mDialogPhoto" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/mainPhoto3LG.jpg'/>
      </div>
    </div>
  </div>
</div>

                    <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                        <a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
                        <p class="text-center"><span>Compass Cay</span><br></p>
                    </div>
                    <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                        <a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage2-1.jpg'/></a>
                         <p class="text-center"><span>Whiteside</span><br></p>
                    </div>
                    <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                        <a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage3-1.jpg'/></a>
                        <p class="text-center"><span>Exuma Rocks</span><br></p>
                    </div>
                     <div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
                            <a class="btn contentBtn btn-block" href="/videography#photography">View Photos</a>
                    </div>
                     <div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
                            <a class="btn contentBtn btn-block" href="/videography#photography">View Photos</a>
                    </div>
        </div>
    </div>
</section>


和CSS

.mDialogPhoto {
        width: 95%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .modal-body {
        padding: 0px;
    }
    .modal-backdrop.in {
        opacity: 0.8;
    }
    .modal-content {
        background-color: transparent;
    }
    .img-responsiveModal {
        display: block;
        width: 100%;
        height: auto;
    }
    .modal-dialog {
        margin-top: 50px;
    }
    .photoBG span {
        font-size: 2em;
        letter-spacing: 2px;
    }
    .photoBG p {
        background-color: #e2e3df;
        font-size: .8em;
        letter-spacing: 1px;
        padding-top: 8px;
        padding-bottom: 13px;
        margin-bottom: 20px;
    }

最佳答案

问题是您错过了<div class="container">中的等号。

在其中添加可解决此问题（单击“完整页面”以查看有效）：



.mDialogPhoto {
  width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.modal-body {
  padding: 0px;
}

.modal-backdrop.in {
  opacity: 0.8;
}

.modal-content {
  background-color: transparent;
}

.img-responsiveModal {
  display: block;
  width: 100%;
  height: auto;
}

.modal-dialog {
  margin-top: 50px;
}

.photoBG span {
  font-size: 2em;
  letter-spacing: 2px;
}

.photoBG p {
  background-color: #e2e3df;
  font-size: .8em;
  letter-spacing: 1px;
  padding-top: 8px;
  padding-bottom: 13px;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="section2">
  <div class="container">
    <div class="row">
      <div class=" col-md-10 col-md-offset-1 section2Text">
        <h2 class="text-center">Stock Footage</h2>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nunc nec enim fringilla convallis at et neque. Maecenas vitae tortor porttitor, sollicitudin lorem nec, cursus est. Mauris vel ligula ac sapien pulvinar tempor. Nullam rutrum
          finibus nisl, sed euismod mi placerat id.</p>
      </div>

      <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog mDialogPhoto" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/mainPhoto1LG.jpg' />
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog mDialogPhoto" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/mainPhoto2LG.jpg' />
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog mDialogPhoto" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/mainPhoto3LG.jpg' />
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
        <a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg' /></a>
        <p class="text-center"><span>Compass Cay</span><br></p>
      </div>
      <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
        <a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage2-1.jpg' /></a>
        <p class="text-center"><span>Whiteside</span><br></p>
      </div>
      <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
        <a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage3-1.jpg' /></a>
        <p class="text-center"><span>Exuma Rocks</span><br></p>
      </div>
      <div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
        <a class="btn contentBtn btn-block" href="/videography#photography">View Photos</a>
      </div>
      <div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
        <a class="btn contentBtn btn-block" href="/videography#photography">View Photos</a>
      </div>
    </div>
  </div>
</section>





希望这可以帮助！ :)

关于html - 具有模态的部分伸出行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46820946/

10-09 00:35
Powered by LMLPHP ©2024 模态的 0.037868