带有模态延伸行的部分

时间：2017-10-18 23:54:53

标签： html css twitter-bootstrap

我有一个包含三个图像模态的部分。打开模态的按钮是照片。我的问题是，为什么三个图像按钮在屏幕上伸展？引导程序总是放入行的两侧的自动边距发生了什么？它就像行延伸出来一样。这是我的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;
    }

1 个答案:

答案 0 :(得分：0)

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

添加此项可更正问题（点击＆＃39;完整页面＆＃39;查看此效果）：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！ ：）

相关问题
最新问题