ट्विटर बूटस्ट्रैप 2.0 में केंद्र Navbar 2.

Question

मान लें कि हमारे पास ट्विटर बूटस्ट्रैप 2.0 का उपयोग करके नेविगेशन बार के लिए निम्न मार्कअप है।

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner pull-center"> 
     <ul class="nav"> 
     <li class="active"><a href="#">HOME</a></li>       
     <li><a href="#contact">CONTACT</a></li> 
     </ul>   
    </div> 
</div> 

.navnavbar-inner अंदर केंद्र के लिए सबसे अच्छा तरीका क्या है?

@media (min-width: 980px) { 
    .pull-center { 
     text-align: center; 
    } 
    .pull-center > .nav { 
     float:none; 
     display:inline-block; 
     *display: inline; *zoom: 1; 
     height: 32px; 
    } 
} 

Answer 1

अवहेलना 960px करने के लिए auto से नेवबार भीतर कंटेनर की चौड़ाई:

मैं केवल मेरे अपने सीएसएस शैलियों को जोड़ने के साथ आया था।

.navbar-inner .container {width:960px;} 

Answer 2

बस http://twitter.github.com/bootstrap/components.html#navbar के अनुसार कंटेनर कक्षा का उपयोग करके मेरी नौसेना केंद्रित है; हालांकि, यह निश्चित चौड़ाई है और स्वरूपण बंद है (एनएवी बार की ऊंचाई बढ़ी है और यह संभव है कि मैं कुछ गलत कर रहा हूं)।

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

अभी भी न्यूनतम चौड़ाई और अब्रैप की जांच कर रहा है, लेकिन बूटस्ट्रैप कंटेनर वर्ग निश्चित चौड़ाई का दूसरा विकल्प एक बच्चा जोड़ना है navbar- भीतरी के। मैं जानना चाहता हूं कि एक अंतर्निहित बूटस्ट्रैप समाधान है जैसे कि पंक्ति-तरल पदार्थ और spanN कक्षाएं, लेकिन मैं या तो नौसेना के भीतर सही ढंग से स्वरूपित नहीं कर पा रहा हूं।

<div style="margin-left: 15%; margin-right: 15%;"> 

Answer 3

मैं इस उपयोगी और साफ पाया है:

<div class="navbar navbar-fixed-top"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">HOME</a></li>       
     <li><a href="#contact">CONTACT</a></li> 
     </ul>   
    </div> 
</div> 

जहां, सीएसएस है:

.container {left:auto;right:auto} 

यह आपके वर्तमान नेवबार की चौड़ाई के आधार पर div केंद्रित हो जाएगा।

उत्तरदायित्व अलग-अलग प्रबंधित किया जाता है।

एचटीएमएल:

<div class="navbar"> 
    <div class="navbar-inner"> 
    <ul class="nav"> 
     .... 
    </ul> 
    </div> 
</div> 

सीएसएस:

.navbar .navbar-inner { 
    text-align: center; 
} 
.navbar .navbar-inner .nav { 
    float: none; 
    display:inline-block; 
} 

परीक्षण नहीं किया

Answer 4

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 5

एक गतिशील चौड़ाई के साथ केंद्र में संरेखित करने के लिए

, मैं निम्नलिखित इस्तेमाल किया , लेकिन मुझे लगता है कि केवल display:inline-block; एक समस्या हो सकती है, जो आईई 7 और उससे कम के अलावा सभी ब्राउज़रों में समर्थित है ..

http://caniuse.com/inline-block