SORU
24 Ocak 2014, Cuma


Bootstrap 3 Floş alt altbilgi. sabit

Tasarlıyorum bir site Bootstrap 3 kullanıyorum.

Bu örnek gibi bir footer yapmak istiyorum. Sample

Lütfen gezinti çubuğu-sabit-alt sorunumu çözmüyor yani bootstrap TAMİR istemiyorum unutmayın. Ben her zaman içeriği alt kısmında olmak istiyorum ve aynı zamanda duyarlı olmak.

Herhangi bir rehberlik çok takdir edilecektir.


DÜZENLEME:

Özür dilerim anlatamadım. Artık ne zaman içeriği vücudun yeterli içerik yok. Benim altbilgi yukarı doğru hareket eder ve daha sonra altta bir boşluk bırakır.

Bu artık benim için bir gezinti çubuğu var

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

CEVAP
24 Ocak 2014, Cuma


Örnekte, Bu sayfaya daha fazla içerik varsa Altbilgi sayfa daha az içerik varsa Eğer alt sopa konumunu ve normal altbilgi gibi davranır.

Demo Tutorial

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
 </div>
 <div class="footer">
   <p>Copyright (c) 2008</p>
 </div>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • GALERNAYA20

    GALERNAYA20

    19 NİSAN 2011
  • Grace Su

    Grace Su

    6 Ocak 2006
  • TheScorpioTechno

    TheScorpioTe

    15 Aralık 2010