Question

我在网站上有页脚问题。这有点奇怪，因为我从未遇到过页脚问题。

我想将页脚放置在与菜单完全相同的位置，我使用Bootstrap，所以我使用了列，但它不起作用。我不知道为什么页脚上的元素之间的空格不同（所有元素的列数相同），并且它也不会从菜单开始的地方开始。

这是代码：

HTML：

    <div class="container"> <!--el container creo que hacía que los círculos se viesen más peques-->
  <nav class="navbar navbar-default navbar-fixed-top menupropio">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="index.html"><img class="logo_menu img-responsive" src="images/logo_peque.png" alt="logo home"/></a>


      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <div class="secciones">
        <ul class="nav navbar-nav" style="border-bottom:0px">
          <!--<li class="active"><a href="#">Home</a></li>-->

          <li><a href="kontakt.html" class="head-nav-button nav_graphicdesign">Kontakt</a></li>
          <li><a href="#valik" class="head-nav-button nav_photography">Valik üle 20 aasta jooksul tehtud töödest</a></li> <!--todo los trabajos juntos -->
          <li><a href="#valik" class="head-nav-button nav_photography">Logod</a></li> <!--en esta pagina van todos los logos-->
          <li><a href="#valik" class="head-nav-button nav_photography">Trükised ja muu</a></li> <!--todo lo que no sean logos-->

        </ul>
        </div>
      </div><!--/.nav-collapse -->
  </nav>




    <!--work designs starts-->
    <section class="row center-block text-center">
     <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="res_publica.html"><img class="img-responsive img-circle" src="images/res_publica_valimiskampaania_kujundus_thumbnail.jpg" alt="Res Publica valimiskampaania"/>
          <span>Res Publica valimiskampaania</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="ajakiri_lofo.html"><img src="images/lofo_loodusfotoajakiri.jpg" class="img-responsive img-circle" alt="Ajakiri LoFo"/>
          <span>Ajakiri LoFo</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="kataloogid.html"><img src="images/kataloogid.jpg" class="img-responsive img-circle" alt="Kataloogid"/>
          <span>Kataloogid</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="hansab_logo.html"><img src="images/hansab_logo.jpg" class="img-responsive img-circle" alt="Hansab logo"/>
          <span>Hansab logo</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="hotelli_sildid.html"><img src="images/hotelli_do_not disturb_silt.jpg" class="img-responsive img-circle" alt="Hotelli sildid"/>
          <span>Hotelli sildid</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="mappkaaned.html"><img src="images/mappkaaned.jpg" class="img-responsive img-circle" alt="Mappkaaned"/>
          <span>Mappkaaned</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="seinakalender.html"><img src="images/seinakalender.jpg" class="img-responsive img-circle" alt="Seinakalender"/>
          <span>Seinakalender</span>
          </a>
        </div>
      </div>

      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="rings">
          <a href="ajakiri_psyk.fi.html"><img src="images/ajakiri_psyk_fi.jpg" class="img-responsive img-circle" alt="Ajakiri Psyk.fi"/>
          <span>Ajakiri Psyk.fi</span>
          </a>
        </div>
      </div>

       </section>

  </div> <!--container-->


<footer>
    <div class="footer">
      <div>
        <div class="col-md-offset-4 col-sm-5 col-md-1 col-lg-1">
            <p>Kiige RB OÜ</p>
          </div>
          <div class="col-sm-5 col-md-1 col-lg-1">
            <a target="_blank" href="mailto:kiige@kiige.ee"><p>kiige@kiige.ee</p></a>
          </div>
          <div class="col-sm-5 col-md-1 col-lg-1">
            <p>+(372) 50 20 506</p>
          </div>
          <div class="col-sm-5 col-md-1 col-lg-1">
            <p>Tuleme hea meelega teile külla!</p>
          </div>
      </div>
    </div>
  </footer>

和CSS：

footer{
    margin-top:0px;
    color: black;
    text-align: center;
    font-size: 0.9em;
}

如果您想查看该网站，这是临时链接：http://clients.sabrinacouto.com/kiige/

有谁知道如何解决它？

非常感谢！

Answer 1

您的所有部分似乎都使用“行”

<section class="row center-block text-centre">

但是，您的页脚没有围绕列的行来否定它添加的间距。 Col总是为两侧增加一个间距。如果你有多个cols，那么行就是否定那个间距。

Answer 2

在你的HTML中编辑就像这样可以帮助你

<footer>
    <div class="footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-3 col-lg-3">
            <p>Kiige RB OÜ</p>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3">
            <a target="_blank" href="mailto:kiige@kiige.ee"><p>kiige@kiige.ee</p></a>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3">
            <p>+(372) 50 20 506</p>
          </div>
          <div class="col-sm-6 col-md-3 col-lg-3">
            <p>Tuleme hea meelega teile külla!</p>
          </div>
      </div>
    </div>
  </div>
  </footer>

页脚看起来不像我想要的。引导

2 个答案: