ट्विटर बूटस्ट्रैप नेविबार संशोधित करें

Question

मैं ट्विटर बूटस्ट्रैप नेविबार को संशोधित करने का प्रयास कर रहा हूं, इस समय सभी लिंक बाईं ओर गठबंधन किए गए हैं, जब मुझे वास्तव में पसंद आएगा तो उन्हें केंद्रीय होना चाहिए।

एक अलग पोस्ट में मैं पढ़ा है कि आप इस

.tabs, .pills { 
    margin: 0 auto; 
    padding: 0; 
    width: 100px; 
} 

का उपयोग लेकिन इसके लिए मुझे

क्या मैं सीएसएस में बदलने की जरूरत है ऐसा करने के लिए क्या कर काम नहीं किया, मैं मैं डाल समझते हैं बूटस्ट्रैप में संशोधित सीएसएस और ओवरराइड।

किसी भी मदद की सराहना की

यह मेरा मार्कअप

लेआउट/आवेदन

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

    <a class="brand">Newbridges</a> 

    <% if user_signed_in? %> 
    <div class="nav-collapse"> 
     <ul class="nav "> 
     <%= render "shared/navbarlogin" %> 
    </div> 

    <% else%> 
    <div class="nav-collapse"> 
     <ul class="nav"> 

     <%= render "shared/navbar" %> 
    </div> 
    <% end %> 

मैं भी इस

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

Answer 1

आप सेट करके अपने एनएवी मेनू केंद्रित कर सकता है की कोशिश की है है float:left ली के बजाय आपके मेनू आइटम display:inline-block पर ke तो:

.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; 
} 

हालांकि मैं आप अपने नेवबार मेनू है कि आप केंद्र के लिए इच्छा को लक्षित करने के, इस तरह से आप अन्य एनएवी वर्गों आप में हो सकता है के साथ बूटस्ट्रैप मूलभूत मूल्यों और गंदगी परेशान नहीं करेगा अपने ही वर्ग बनाने की सलाह आपका पृष्ठ। तुम इतनी है कि यह कर सकते हैं: नेवबार कंटेनर

<div class="navbar navbar-fixed-top center"> 
    <div class="navbar-inner"> 
     .... 
    </div> 
</div> 

में

^{सूचना .center वर्ग और फिर आप लक्षित कर सकते हैं तो तरह .center वर्ग:}

.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; 
} 

डेमो: http://jsfiddle.net/C7LWm/show/

संपादित करें: रीयलिन करने के लिए भूल गए

सीएसएस

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

डेमो:: बाईं ओर सबमेनू आइटम, यह सुधार है http://jsfiddle.net/C7LWm/1/show/

Answer 2

आह और भी, आप (दोनों पक्षों पर रिक्त स्थान से पहले "परियोजना का नाम" के लिए चाहते हैं तो और बाद "ड्रापडाउन") सममित होना करने के लिए, निम्नलिखित जोड़ें:

.navbar .nav, .navbar .nav > ul 
{ 
    float: right 
} 

इसके अलावा, यह है कि का उपयोग कर (Bootstra के रूप में निम्नलिखित लगता है पी v2.0।4) नेवबार अभी भी केंद्र नहीं करता है:

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     <div class="container-fluid"> 
     . 
     . 
     . 
     </div> 
     </div> 
</div> 

आप

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     <div class="container"> 
     . 
     . 
     . 
     </div> 
     </div> 
</div> 

(एन्ड्रेस llich द्वारा प्रदान की नमूना से निकाले करने के लिए बदलने की जरूरत है, बस है कि वह परिवर्तन)

से चूक गए

अब यह मेरे लिए काम करता है ...

Answer 3

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैंने इस पोस्ट को अपने गुगल में कुछ बार देखा है। मैं वास्तव में ट्विटर बूटस्ट्रैप में नेविबार को केंद्रित करने के लिए सीधे रिकॉर्ड सेट करना चाहता हूं क्योंकि मौजूदा स्वीकृत विधि गलत नहीं है, लेकिन ट्विटर बूटस्ट्रैप इसका समर्थन नहीं करता है।

वास्तव में इसे करने का एक बेहतर तरीका है और इसे मैन्युअल रूप से संशोधित करना। यह ट्विटर बूटस्ट्रैप में पहले से ही उपयोग कर कोड काट देगा।

<div class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="#">RIZEN</a> 
      <ul class="nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">Events</a></li> 
       <li><a href="#">Links</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Forums</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

टूटने
पहली पंक्ति बहुत सरल रूप में हम, नेवबार पैदा कर रहे शीर्ष करने के लिए व्यूपोर्ट पर एक निश्चित स्थिति के लिए इसे स्थापित करने और फिर रंग विषय inverting द्वारा काला करने के लिए सफेद अदला-बदली है।

अगला हम नौसेना-आंतरिक को असाइन करने जा रहे हैं जो कम से कम कहता है, यदि संभव हो तो न्यूनतम हाइट सेट करें और यह वह जगह है जहां वास्तविक रंग स्टाइलिंग आते हैं, ऊपर की रेखा नहीं।

यहां महत्वपूर्ण लाइन है क्योंकि हम navbar के लिए तरल लेआउट छोड़ रहे हैं और केवल एक कंटेनर के साथ जा रहे हैं। यह मार्जिन के साथ एक निश्चित सेट करता है जो केंद्र आंतरिक सामग्री को स्क्रीन पर संरेखित करता है। यह ऑटो मार्जिन होने और चौड़ाई निर्धारित करने के माध्यम से किया जाता है।

यह विधि वही करेगी जो आप चाहते हैं क्योंकि आप वास्तव में अतिरिक्त कोड जोड़कर और मचान बूटस्ट्रैप के साथ मचान का उपयोग करके हेडर अनुरोधों में केबी को सहेजते हैं और अतिरिक्त कोड ब्लोट नहीं रखते हैं। मैंने अपनी परियोजनाओं में इस विधि का उपयोग किया है और इसे अपने वर्तमान प्रोजेक्ट में उपयोग करना जारी रखता हूं। टीबीएस (ट्विटर बूटस्ट्रैप) को संशोधित करने का खतरा यह है कि आप कोड स्थिरता खो देते हैं और यदि भविष्य में आप चीजों को बदलना चाहते हैं तो आपको जो कुछ बदल गया है उसका मानसिक ध्यान रखना है अन्यथा चीजें इरादे से काम नहीं कर सकती हैं।

उम्मीद है कि इससे मदद मिलती है। अगर आप एक कामकाजी उदाहरण चाहते हैं तो बस ट्विटर बूटस्ट्रैप के मुखपृष्ठ पर देखें क्योंकि यह बस है।

Answer 4

उपरोक्त से केंद्रित सीएसएस केवल अन-ध्वस्त नौसेना पर काम करता है।

हालांकि, जब navbar ध्वस्त हो जाता है तो यह आदर्श नहीं है। डिफ़ॉल्ट रूप से, प्रत्येक संक्षिप्त नवाबार आइटम अपनी पंक्ति पर होता है, जैसे ड्रॉप डाउन मेनू। लेकिन उपरोक्त सीएसएस सभी ढह गई वस्तुओं को एक ही पंक्ति पर फेंकने की कोशिश करता है, जो आदर्श से कम है।

मैं एक मीडिया क्वेरी में केंद्रित सीएसएस लपेटकर के इस छोटे से ठीक इस्तेमाल किया, तो यह केवल गैर ढह navbars पर ट्रिगर किया जाता है:

@media (min-width: 768px) { 
    .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; 
    } 
}