تعديل شريط التنقل Twitter Bootstrap إلى الروابط المركزية

عند العمل باستخدام شريط التنقل Twitter Bootstrap، قد يواجه المستخدمون الحاجة إلى محاذاة روابط التنقل مركزيًا، بدلاً من المحاذاة الافتراضية لليسار . لتحقيق ذلك، قم بإجراء التخصيصات التالية باستخدام ورقة أنماط CSS.

الحل

لتوسيط روابط التنقل في شريط التنقل، قم بتنفيذ كود CSS التالي:

.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner {
    text-align: center;
}

نهج بديل

للحفاظ على إعدادات Bootstrap الافتراضية واستهداف قائمة شريط تنقل محددة، قم بإنشاء فئة مخصصة وتطبيقها على حاوية شريط التنقل:

    

        ....
    

ثم، استهدف فئة .center في ورقة أنماط CSS:

.center.navbar .nav,
.center.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}

اعتبارات إضافية

لمحاذاة عناصر القائمة الفرعية إلى اليسار، أضف قاعدة CSS التالية:

.center .dropdown-menu {
    text-align: left;
}