2016-06-30 8 views
0

Ich habe Probleme mit der Fußzeile auf der Website. Es ist ein bisschen komisch, weil ich nie Probleme mit Fußzeilen hatte.Fußzeile sieht nicht wie ich will. Bootstrap

Ich möchte die Fußzeile genau wie das Menü platzieren, ich benutze Bootstrap, also verwende ich Spalten, aber es funktioniert nicht. Ich weiß nicht, warum der Abstand zwischen Elementen in der Fußzeile unterschiedlich ist (alle Elemente haben die gleiche Anzahl an Spalten) und auch nicht dort, wo das Menü beginnt.

Dies ist der Code:

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:[email protected]"><p>[email protected]</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> 

und CSS:

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

Wenn Sie einen Blick auf die Website nehmen möchten, ist dies der vorläufige Link: http://clients.sabrinacouto.com/kiige/

Weiß jemand, wie man es löst?

Vielen Dank!

Antwort

0

Alle Ihre Abschnitte scheinen „Reihe“

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

jedoch Ihre Fußzeile nicht haben eine Reihe rund um Ihre Spalten zu verwenden, um den Abstand fügt zu negieren. Col fügt immer einen zusätzlichen Abstand zu beiden Seiten hinzu. Die Zeile ist da, um diesen Abstand zu negieren, wenn Sie mehrere Spalten haben.

+0

Ok, jetzt habe ich Reihe und Fußzeile beginnt dort, wo Menü beginnt. Aber ich habe immer noch das Problem mit dem Abstand zwischen den Elementen (zum Beispiel ist der Abstand zwischen "Kiige RB OÜ" und E-Mail größer als der Abstand zwischen "+ (372) 50 20 506" und "Tuleme hea meelega teile külla!". Danke! – Sabrina

0

bearbeiten in Ihrem HTML als wie dies kann es hilft Ihnen

<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:[email protected]"><p>[email protected]</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> 
+0

Nun, es sieht besser aus als meine Option. Aber es ist immer noch nicht das gleiche wie Menü. Ich nehme an, dass es aufgrund der Größe der Spalten nicht möglich ist und auch der letzte Satz ist zu lang. Danke! – Sabrina