Bootstrap 3 Floş alt altbilgi. sabit

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ş: