बूटस्ट्रैप: कुछ नौसेना आइटमों को केंद्र करें

Question

मैं बूटस्ट्रैप नेविबार रखना चाहता हूं जहां कुछ एनवी आइटम बाएं-उचित हैं, कुछ सही हैं, और कुछ उनके बीच शेष स्थान में केंद्रित हैं। , एक साथ होने के लिए केंद्र 1 और केंद्र 2 नव आइटम की तरह I'd नेवबार में केंद्रित -

<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a>Left</a></li> 
     </ul> 
     <ul class="nav nav-center"> 
      <li><a>Center 1</a></li> 
      <li><a>Center 2</a></li> 
     </ul> 
     <ul class="nav pull-right"> 
      <li><a>Right</a></li> 
     </ul> 
    </div> 
</div> 

यह jsfiddle http://jsfiddle.net/b7whs/ यह दिखाता है। क्या यह संभव है?

SO पर इस बारे में बहुत सारे सुझाव हैं कि यह कैसे करें; उनमें से कोई भी मेरे लिए काम नहीं किया है। क्या यह भी संभव है?

मेरे मामले में, बाएं और दाएं क्या है हमेशा एक ही आकार होगा, इसलिए मुझे लगता है कि यह व्यवहार्य होना चाहिए।

Answer 1

तुम बस शैलियों की एक जोड़ी की जरूरत व्यवहार मुझे लगता है कि आप चाहते थे प्राप्त करने के लिए छोड़ दिया है। ऐसा लगता है कि आप तत्वों को केन्द्रित करने के लिए display:inline-block मार्ग पर जा रहे थे, इसलिए मैं उस दृष्टिकोण के साथ ही जारी रहूंगा। अपने मौजूदा शैलियों के लिए, जोड़ें/परिभाषाओं को संशोधित इतना है कि इन शैलियों शामिल किए गए हैं:

.nav.nav-center { 
    margin:0; 
    float:none; 
} 

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

इसी के साथ

, दो विकल्प अपने नेविगेशन पट्टी के ठीक मध्य करने के लिए आगे बढ़ना चाहिए। यह दिखाने के लिए कि यह कैसा दिखता है, यहां JSFiddle example है। मुझे आशा है कि यह वही है जो आप खोज रहे थे! यदि नहीं, तो मुझे बताएं और मुझे आगे मदद करने में खुशी होगी।

Answer 2

उपयोग इस सीएसएस वास्तव में बूटस्ट्रैप में li और ul हैं नाव http://jsfiddle.net/b7whs/4/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.nav.nav-center { 
    display: inline-block; 
    left: 0; 
    right: 0; 
    text-align:center;width:70%; 
} 
.nav.nav-center li,.nav.nav-center li a{display:inline;float:none;line-height:40px;} 

Answer 3

अभी हाल ही में समाधान मिला।

बस के रूप में सीएसएस जोड़ें:

/* center the navbar*/ 
.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; 
} 

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

और इस

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

Answer 4

तरह नेवबार के लिए केंद्र वर्ग को जोड़ने है कि मैं * बिल्कुल * जो चाहते हैं उसे इस कोड

<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4"> <ul class=" nav navbar-nav "> <li><a href="#">products</a></li> </ul> </div>