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.
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ÅŸ:
Veya sabit ızgara sistemi ve duyarlı t...
Flushing sayfa, twitter bootstrap alt ...
twitter bootstrap sabit üst üste binen...
Bootstrap - sabit genişlikli nasıl kur...
Twitter Bootstrap 3 Yapışkan Altbilgi...