javascript - iframe 100% 全宽 bootstrap3

Question

我找到了一个很好的联系页面，我想复制它，请参阅 this link在康塔蒂部分。

我正在将 Initializr 与 Twitter Bootstrap3 结合使用。

这是联系部分的 HTML/css/js 结构，我在 iframeWrapper 内放置了一个 gmaps iframe (id="map")，位置为:relative，iframeBlock 是一个全宽/高面板，不透明度 = 0.7 来遮蔽iframe、iframeCont 带有两个面板，其中包含一些联系人链接以及 btn-map 和 btn-cont，用于在事件(没有不透明度并且可以进行滚动和使用缩放按钮)和非事件 iframe 之间切换。我为 iframeWrapper 内的所有其他元素设置了position:absolute。

$('#btn-map').click(function(){
    $('#iframeBlock').hide();
    $('#iframeCont').hide();
    $('#btn-map').css('display','none');
    $('#btn-cont').css('display','block');
});

$('#btn-cont').click(function(){
    $('#iframeBlock').show();
    $('#iframeCont').show();
    $('#btn-map').css('display','block');
    $('#btn-cont').css('display','none');       
});

#cont{
	  width: 100%;
    height: 100%;
    padding-top: 50px;
    text-align: center;
    background: #fff;
}
#map{
   z-index:5;
    width: 100%;
    padding: 0;
}
#iframeWrapper{
  position: relative;
}
#iframeBlock{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity:0.7;
  background: #000;
  z-index: 6;
  text-align:center;
}
#iframeCont{
  position: absolute;
  top:20%;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 7;
  text-align:center;
}
.cont-element{
  background: #0b5394;
  color:#FFF;
  margin-bottom: 5%;
  border-radius: 10px;
  padding: 3%;
  font-size: 1.2em;
}

#btn-map{
  position: absolute;
  top:70%;
  left:25%;
  z-index: 7;
  opacity: 1;
  background: #cc0000;
  color: #FFF;
  border-color: #FFF;
  display:block;
}
#btn-cont{
  position: absolute;
  top:70%;
  left:30%;
  z-index: 7;
  opacity: 0.7;
  background: #FFF;
  color: #000;
  border-color: #cc0000;
  display:none;
}

 <!-- Contatti Section -->
      <section id="cont" class="cont-section">
          <div class="container-fluid">
              <div class="row-fluid">
                <div id="iframeWrapper">

                   <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2786.232975915266!2d8.878734115818997!3d45.70636282527264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478688abc9247355%3A0x59d85ca1774dc65a!2sASD+Pallacanestro+Lonate+Ceppino!5e0!3m2!1sit!2sit!4v1445187794194" frameborder="0" style="border:0" allowfullscreen></iframe>

                   <div id="iframeBlock">

                   </div>

                   <div id="iframeCont">
                    
                      <div class="row">
                       <div class="col-xs-2">
                        </div>
                        <div class="col-xs-8 cont-element">
                          <i class="fa fa-mobile"></i> </br> <a href:"tel:xxxxxxxx">xxxxxxxx</a> <span>Giovanni</span>    
                        </div>
                         <div class="col-xs-2">
                        </div>
                      </div>
                       
                      <div class="row">
                       <div class="col-xs-2">
                        </div>
                        <div class="col-xs-8 cont-element">
                           <i class="fa fa-envelope"></i> </br> <a href="mailto:xxxxxxxx@gmail.com">xxxxxxxx@gmail.com</a> 
                        </div>
                         <div class="col-xs-2">
                        </div>
                      </div>

                     </div>
                        
                                <button id="btn-map" class="btn btn-info btn-lg"><i class="fa fa-map-o"></i> <strong>Visualizza Mappa</strong></button>
                                <button id="btn-cont" class="btn btn-info btn-lg"><i class="fa fa-phone"></i> <strong>Contattaci</strong></button>

                  </div>
 
                </div>   
              </div>

<!-- begin snippet: js hide: false -->

一切正常，但由于容器流体，我在 iframeWrapper 周围有 15px 的填充，然后在左侧和右侧看到两个白色边框。

我尝试将容器流体的填充重置为零，但它显示水平滚动条，就好像内容位于视口(viewport)之外。

Image that show contact section

你能帮我吗？谢谢

Answer 1

使用 Google Chrome 开发者工具分析代码，我发现有两行超出了视口(viewport)宽度。 (例如，如果视口(viewport)宽度为380px，则行宽为410px)，所以我写了这个CSS规则:

#iframeCont .row{
  width: 100%;
}

它仅指两行，现在我的 iframe 周围不再有空白。

但对我来说这是一个糟糕的解决方案!我的 html 结构可能设计得很糟糕!