javascript - 响应式页脚和谷歌地图

Question

如果有人有空闲时间，如果有人看过我的代码并帮助我，我将不胜感激......

在为我的网页创建页脚时(我正在使用 Bootstrap 创建它)我遇到了一个我自己无法解决的问题......我在这里阅读了几篇文章并用谷歌搜索了这个问题 并找到了一些解决方案，但它们对我的情况不起作用...

问题出在 iframe 元素内的谷歌地图......当页面加载到计算机显示器上时跳转到左上角并覆盖所有其他内容......但它以某种方式在移动设备上工作...

这是我的代码:

#noga {
  color: #ffffff;
  background-color: #002d68;
  position: relative;
  font-family: 'Abel', sans-serif;
  font-size: 12px;
}

#noga .contacts {
  width: 100%;
}

#noga .contacts .title {
  font-size: 14px;
  font-weight: 600;
}

#noga .footer-columns {
  display: inline-flex;
  list-style: none;
  padding-top: 10px;
}

#noga .tekmovanja {
  list-style: none;
}

#noga .tekmovanja a {
  color: #fff;
  text-decoration: none;
  font-weight: 200;
}

#noga .osnovni-podatki {
  list-style: none;
}

#noga .osnovni-podatki a {
  color: #fff;
  text-decoration: none;
  font-weight: 200;
}

#noga .povezave {
  list-style: none;
}

#noga .povezave a {
  color: #fff;
  text-decoration: none;
  font-weight: 200;
}

#noga .mnz .logo {}

#noga .mnz .detail {
  font-size: 12px;
  font-weight: 200;
}

#noga .map {
  margin-left: 25px;
}

#noga .iframe {
  margin-bottom: -5px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="noga">
  <div class="contacts">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-8 col-md-offset-1 footer-columns">
          <ul class="tekmovanja col-md-2">
            <div class="title">Tekmovanja:</div>
            <li><a href="#">3.SNL - Sever</a></li>
            <li><a href="#">1. Članska liga</a></li>
            <li><a href="#">2. članska liga</a></li>
            <li><a href="#">Pokal člani</a></li>
            <li><a href="#">Mladina</a></li>
            <li><a href="#">Pokal mladinci</a></li>
            <li><a href="#">Kadeti</a></li>
            <li><a href="#">Starejši dečki 1</a></li>
            <li><a href="#">Starejši dečki 2</a></li>
            <li><a href="#">Mlajši dečki 1</a></li>
            <li><a href="#">Mlajši dečki 2</a></li>
            <li><a href="#">Mlajši dečki 3</a></li>
            <li><a href="#">Starejši cicibani A+B</a></li>
            <li><a href="#">Starejši cicibani A-1</a></li>
            <li><a href="#">Starejši cicibani A-2</a></li>
            <li><a href="#">Starejši cicibani Koroške</a></li>
            <li><a href="#">Zimska liga</a></li>
            <li><a href="#">Futsal</a></li>
          </ul>
          <ul class="osnovni-podatki col-md-2">
            <div class="title">Osnovni podatki:</div>
            <li><a href="#">Klubi</a></li>
            <li><a href="#">Reprezentance</a></li>
            <li><a href="#">Grassroots</a></li>
            <li><a href="#">Klub Klubu</a></li>
            <li><a href="#">Obrazci in predpisi</a></li>
            <li><a href="#">Trenerji in sodniki</a></li>
            <li><a href="#">Delegati</a></li>
            <li><a href="#">Razno</a></li>
            <li><a href="#">Ugodnosti</a></li>
          </ul>
          <ul class="povezave col-md-2">
            <div class="title">Povezave:</div>
            <li><a href="#">Nogometna zveza slovenije</a></li>
            <li><a href="#">MNZ Lendava</a></li>
            <li><a href="#">MNZ Murska Sobota</a></li>
            <li><a href="#">MNZ Ptuj</a></li>
            <li><a href="#">MNZ Celje</a></li>
            <li><a href="#">MNZ Gorenjske</a></li>
            <li><a href="#">MNZ Ljubljana</a></li>
            <li><a href="#">MN Koper</a></li>
            <li><a href="#">MNZ Nova Gorica</a></li>
            <li><a href="#">Rad igram nogomet</a></li>
            <li><a href="#">As v nogah</a></li>
          </ul>
          <ul class="mnz col-md-2">
            <div class="logo">
              <img src="img/logo.png" alt="logo" class="img-responsive" style="height:60px;">
            </div>
            </br>
            <p class="detail"><b>Medobčinska nogometna</br> zveza Maribor</b></p>
            <p class="detail">Engelsova ulica 6 </br>2000 Maribor</p>
            <p class="detail"><b>T</b>:031 782 191</br><b>E</b>:info@mnzveza-mb.si</p>
            <p class="detail"><b>Uradne ure:</b></br>pon.-pet. od 9.00 do 15. ure</p>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="map">
    <div class="row">
      <div class="col-md-2">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1757.7189717539436!2d15.629256882849571!3d46.55027815580515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476f77bd9e426903%3A0xd89f34403b107bf0!2sEngelsova+ulica+6%2C+2000+Maribor!5e1!3m2!1ssl!2ssi!4v1497338864036"
          width="600" height="380" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>

我真的很感激这方面的一些帮助，因为我是 bootstrap 的新手:)

P.S. 抱歉英语不好，这不是我的母语...

Answer 1

这是否更接近您所追求的目标？
https://codepen.io/panchroma/pen/OgjpOB

您的原始网格布局在第一行有页脚 ul 链接，在第二行有 map 。您会看到我注释掉了第 65、66、67 和 69 行，以便将所有页脚元素放在同一行中。

现在是 HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-1 footer-columns">
            <ul class="tekmovanja col-md-2">
            ...
            </ul>
            <ul class="osnovni-podatki col-md-2">
            ..
            </ul>
            <ul class="povezave col-md-2">
            ..
            </ul>
            <ul class="mnz col-md-2">
            ..
            </ul>
        </div> <!-- end col-md-8 -->  

    <div class="map">
        <div class="col-md-2">
            <iframe .... >  
        </div> <!-- end col-md-2 -->   
    </div> <!-- end row -->  
</div> <!-- end container-fluid -->

您可能还想查看 documentation for nested Bootstrap columns , 请注意，如果您希望嵌套列占据其父单元格的整个宽度 ...

Nested rows should include a set of columns that add up to 12

祝你好运!