SORU
26 NİSAN 2012, PERŞEMBE


Twitter Bootstrap - üst gezinme çubuğu sayfanın üst içerik engelleme

Bu Twitter Bootstrap kodu var

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Ama sayfanın başına görüntüleme olduğumda, gezinme çubuğu sayfanın üst kısmındaki içeriği biraz engelliyor. Sayfanın içeriği nav bar tarafından bloke değildir böylece görüntülendiğinde bu içeriği geri kalanı daha düşük aşağı itmek yapmak için nasıl bir fikriniz var mı?

CEVAP
13 HAZİRAN 2012, ÇARŞAMBA


Böyle bir dolgu ekleme eğer duyarlı bootstrap kullanıyorsanız yeterli değil. Pencereyi yeniden boyutlandırdığınızda bu durumda sayfa ve gezinti çubuğu üst arasında bir boşluk elde edersiniz. Uygun bir çözüm bu gibi görünüyor:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AllYourNewsByMe

    AllYourNewsB

    18 Temmuz 2011
  • cekehechu

    cekehechu

    20 HAZİRAN 2006
  • Dylan Dubay

    Dylan Dubay

    10 Temmuz 2013