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

  • Android Central

    Android Cent

    13 Kasım 2008
  • knopik96

    knopik96

    7 Mayıs 2011
  • Phandroid

    Phandroid

    26 Ocak 2009

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR