बूटस्ट्रैप। सेंसर-ब्लॉक अपेक्षित काम नहीं कर रहा है

Question

JSFIddle। मैं बूटस्ट्रैप का उपयोग कर केंद्र संरेखित करना चाहता हूं। सभी मैं चाहता हूँ 2 बातें

1) ul केंद्र संरेखित

2) के रूप में ul के widthनहीं20% या ऐसा ही कुछ की तरह होना चाहिए बनाओ। मैं इसे width: auto; होना चाहता हूं क्योंकि li एस की संख्या गतिशील है।

मैं कोड निम्नलिखित की कोशिश की

 <div class="col-xs-12 col-md-8"> 

     <div class="center-block"> 
      <ul class="nav nav-pills"> 
       <li class="active"><a class="link-text-bright-blue" href="#2015-14" data-toggle="tab" aria-expanded="false"><h5>2015 &amp; 2014</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2013" data-toggle="tab" aria-expanded="false"><h5>2013</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2012" data-toggle="tab" aria-expanded="false"><h5>2012</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2011" data-toggle="tab" aria-expanded="false"><h5>2011</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2006-2010" data-toggle="tab" aria-expanded="false"><h5>2006 - 2010</h5></a></li> 
      </ul> 
     </div> 

     <div> 
      ... Other div 
     </div> 

    </div> 

Answer 1

is it not what justified nav does?

भी याद रखें कि .center-block का उपयोग कर आप के रूप में यह बूटस्ट्रैप

में याद आ रही है float:none; जोड़ने की जरूरत

उल केंद्र संरेखित

.center-block { 
    display: table; 
    margin: 0 auto; 
} 

http://jsfiddle.net/DTcHh/3384/

नोट करें: आप पंक्ति वर्ग

Answer 2

इस प्रयास करें: http://jsfiddle.net/DTcHh/3371/

body { 
    margin: 10px; 
} 
.navbar { 
    border: 1px solid transparent; 

    margin-bottom: 20px; 
    min-height: 50px; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
.navbar-nav { 
    display: inline-block; 
    float: none !important; 
    margin: 0; 
} 
.navbar-right { 
    display: inline-block; 
    float: none !important; 
} 
.navbar-collapse.collapse { 
    display: inline-block !important; 
    float: none !important; 
    height: auto !important; 
    margin: 0 auto !important; 
    overflow: hidden; 
    padding: 0; 
    text-align: center; 
} 
.container { 
    max-width: 100%; 
} 
.navbar-header { 
    display: inline-block; 
    float: left !important; 
} 

Answer 3

.center-block केवल एक के साथ एक div या टैग के भीतर काम करता है के लिए अपने jsfiddle में एक div अनदेखा कर रहे थे परिभाषित चौड़ाई।

अन्यथा, आपको float: none; को सीएसएस .center-block{} में जोड़ना होगा।

यह align या text-align=center; के साथ भी सकारात्मक है, लेकिन पता है कि ऐसा करने के लिए केंद्र-ब्लॉक बनाया गया था।

ध्यान दें कि bootstrap css पहले से कक्षा .center-block निम्नलिखित भीतर शामिल हैं:

// Class 
.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

// Usage as a mixin 
.element { 
    .center-block(); 
}