Question

我找到了一个我希望重现的好的联系页面，请参阅Contatti部分的this link。

我在Twitter Bootstrap3上使用Initializr。

这是Contact Section的HTML / css / js结构，我在iframeWrapper里面放置了一个gmaps iframe（id =“map”），位置为：relative，iframeBlock是一个全宽度/高度面板，opacity = 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的填充，然后在左侧和右侧看到两个白色边框。

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

Image that show contact section

你可以帮帮我吗？感谢

Answer 1

使用Google Chrome开发者工具分析代码，我发现两行超出了视口宽度。（例如，如果视口宽度为380px，行宽为410px），那么我编写此CSS规则：

#iframeCont .row{
  width: 100%;
}

仅指两行，现在我的iframe周围没有更多的空白区域。

但对我来说这是一个糟糕的解决方案！我的html结构可能很差！

iframe 100％全宽bootstrap3

1 个答案: