响应式页脚和谷歌地图

时间：2017-06-23 09:03:13

标签： javascript html css twitter-bootstrap responsive-design

如果有人有空闲时间，如果有人查看我的代码并帮助我，我真的会感到沮丧...

在为我的网页创建一个页脚时（我用Bootstrap制作它）我遇到了一个我无法自行解决的问题... 我在这里阅读了一些帖子并搜索了问题并找到了一些解决方案，但他们在我的情况下不起作用......

问题在于 iframe 元素中的谷歌地图......当页面加载到计算机显示器上时跳转到左上角并覆盖所有其他内容......但它在某种程度上适用于移动设备...

这是我的代码：

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

我真的会对此提供一些帮助，因为我是新手的引导程序：）

P.S。 Sory因为英语不好，不是我的母语...

2 个答案:

答案 0 :(得分：1)

这比你追求的更接近了吗？ https://codepen.io/panchroma/pen/OgjpOB

您的原始网格布局在一行上有页脚ul链接，在第二行上有地图。您将看到我注释掉第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，请注意，如果您希望嵌套列占用其父单元格的整个宽度...

  

嵌套行应包含一组最多可添加12列的列

祝你好运！

答案 1 :(得分：0)

看看这段HTML代码是否可以帮助你：

<section id="noga">
        <div class="container-fluid contacts">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-lg-12">
                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="title">Tekmovanja:</div>
                                <ul class="tekmovanja">
                                    <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>
                            </div>

                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="title">Tekmovanja:</div>
                                <ul class="tekmovanja">
                                    <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>
                            </div>

                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="title">Tekmovanja:</div>
                                <ul class="tekmovanja">
                                    <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>
                            </div>

                            <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="title">Tekmovanja:</div>
                                <ul class="tekmovanja">
                                    <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>
                            </div>

                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="map">
                                <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="100%" height="380" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

根据您的要求更改您的内容和课程。

相关问题
最新问题