SORU
31 Temmuz 2013, ÇARŞAMBA

Twitter Bootstrap 3 Yapışkan Altbilgi

Günaydın, artık uzunca bir süre için twitter bootstrap çerçeve kullanıyorum ve son sürüm 3 için güncellendi!

Sorun yapışkan alt sopa altbilgi yaşıyorum, başlangıç şablon twitter bootstrap web sitesi tarafından sağlanan, ama yine de hiç şans kullandım, herhangi bir fikir?

ÇÖZÜLDÜ! CSS dosyanıza ekleyin.

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}
}

CEVAP
16 Aralık 2013, PAZARTESİ

Resmi Boostrap3 yapışkan altbilgi değinen örnek, <div id="push"></div>, eklemeye gerek yok ve CSS daha kolaydır.

CSS resmi xmaple kullanılır :

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

ve temel HTML :

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

sticky-footer exmapleBu css için link'in kaynak kodu. bulabilirsiniz

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

Tam URL : http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
HtmlCss,-Twitter BootstrapCssTwitter-Bootstrap-3Twitter-bootstrap

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • kalabrandmusic

    kalabrandmus

    25 Kasım 2009
  • TantalizingTrance

    TantalizingT

    15 ŞUBAT 2009
  • ThePhestor

    ThePhestor

    22 Mart 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR