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

  • Autocar

    Autocar

    11 Mart 2006
  • Curso Online Gratuito

    Curso Online

    4 Aralık 2011
  • Karan Thakur

    Karan Thakur

    23 HAZİRAN 2010

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR