2016-06-30 2 views
0

私はウェブサイトのフッタに問題があります。私はフッターに問題がなかったので少し奇妙です。フッターが私のように見えません。ブートストラップ

フッタをメニューのように配置したいので、私はブートストラップを使用しているので、カラムを使用していますが、動作しません。フッタの要素間のスペースが異なる(すべての要素の列数が同じである)理由と、メニューが開始される場所が開始されない理由はわかりません。

これはコードです:

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> 

とCSS:http://clients.sabrinacouto.com/kiige/

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

あなたがウェブサイトを見てみたい場合は、これは暫定的なリンクです

誰でも解決方法を知っていますか?

ありがとうございます!

答えて

0

あなたのすべてのセクションでは、「行」を使用するように見える

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

しかし、あなたのフッターには、それは追加の間隔を否定するために、あなたの列を囲む行を持っていません。 Colは常に両サイドに追加の間隔を追加します。あなたが複数のcolを持っているならば、その行はそのスペースを否定するためにそこにあります。このように、あなたのHTML内

+0

を助けて、今私は、メニューが起動し、行とフッター開始を追加しました。しかし、私はまだ要素間のスペースに問題があります(例えば、 "Kiige RBOÜ"と "+"(372)50 20 506 "と" Tuleme hea meelega teilekülla! – Sabrina

0

編集は、それはあなたに[OK]を

<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

さて、私の選択肢よりもよく見えますが、それでもメニューと同じではありません。列のサイズのせいでできないと思いますし、最後のフレーズも長すぎます。 – Sabrina