SORU
23 ŞUBAT 2012, PERŞEMBE


Nasıl sayfasında twitter bootstrap tabs merkezi muyum?

Twitter bootstrap togglable sekmeleri oluşturmak için kullanıyorum. Burada kullandığım css:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

Bu html doğru sekmeleri görüntüler, ama solda olması gereken budur) çekti. Bu sayfada merkezine sekmeleri almak için CSS, ama hiçbir şey bulamadım ayırmaya çalıştım. Daha fazla css deneyimi olan biri bunu nasıl yapacağımı düşündüm.

Bir not olarak, denedim ve nav hapları, ortalama hakkında bir soru daha var, ama sadece düz nav sekmeleri ile işe yaramadı.

Teşekkürler.

CEVAP
23 ŞUBAT 2012, PERŞEMBE


nav-tabs liste öğeleri otomatik olarak süzülüyor sol tarafından bootstrap yani sıfırlama ve yerine görüntü olarak inline-block ve merkezi menü öğeleri var Ekle öznitelik text-align:center konteyner, bunun gibi

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Demo: http://jsfiddle.net/U8HGz/2/show/ Edit: http://jsfiddle.net/U8HGz/2/


Edit: IE 7'de çalışan yamalı sürümü @kafamı aşağı aşağıdaki yorum Ağrıyor kullanıcı tarafından sağlanan.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit: http://jsfiddle.net/U8HGz/3/

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jose LviS el Bambino ( JLB )   LviSito

    Jose LviS el

    3 ŞUBAT 2008
  • Perihelion

    Perihelion

    23 NİSAN 2008
  • TechSmartt

    TechSmartt

    29 Aralık 2010