केंद्र अनॉर्डर्ड सूची navbar - बूटस्ट्रैप 3

Question

तो, मैं अपने एनवी-बार सूची आइटमों को केन्द्रित करने की कोशिश कर रहा हूं। चूंकि इस कार्य के लिए उपयोगिता कार्य नहीं है, इसलिए मैंने निम्न कोड तैयार किया है जो एक पंक्ति में एक स्तंभ में अनियंत्रित सूची रखता है। साथ बूटस्ट्रैप 3 RC1

<div class="navbar navbar-fixed-top "> 
    <!--<a class="navbar-brand" href="#">Title</a> --> 
    <div class= "row"> 
     <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

मैं अपने दम पर यह पता लगाने में सक्षम था। यकीन है कि अगर ऐसा नहीं है यह सबसे अच्छा समाधान था:

 <div class="navbar navbar-fixed-top">     
        <div style="border:1px solid black" class="container"> 
      <div class="inner-nav"> 
       <!--<a href="#" class="navbar-brand">Title</a> --> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="/" >Home</a></li> 
        <li><a href="#" >About</a></li> 
        <li><a href="#" >Projects</a></li> 
        <li><a href="#" >contact</a></li> 
       </ul> 
      </div> 
        </div>     
      </div> 

मैं तो bootstrap.css के लिए निम्न शैलियों कहा:

/* ADDED for centering navbar items */ 
.navbar .inner-nav ul { 
position:relative;left:50%;float:left;margin-right:0;margin-left:0; 
} 

/* ADDED for centering navbar items */ 
.navbar .inner-nav li { 
position:relative;right:50%;float:left;margin:0;list-style:none 
} 

Answer 2

यहाँ है कोड मैं कल किया था, काम करता है ठीक: 'केंद्र पाठ के अनुरूप' लेकिन सूची अभी भी जायज़ छोड़ दिया करने के बाद भी मैं पुराने के साथ एकत्रित की कोशिश है। आशा है कि यह आपकी मदद करेगा।

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

मुझे बताएं कि समस्या अभी भी है या नहीं।

संपादित करें: निकाला गया अनावश्यक मार्कअप

Answer 3

कदम मैं ले लिया:

• सूची और सूची से निकालें float: left तत्व
• सूची तत्वों के लिए display: inline का उपयोग करें
• display: inline-block के लिए सेट लिंक ताकि वे अपने ब्लॉक आयाम
• सीधे शब्दों में मीडिया क्वेरी मोबाइल पर तो खड़ी सूची में सबकुछ
• लपेटें केंद्र के लिए नेवबार को text-align: center जोड़ने रखने अप्रभावित

परिणामस्वरूप एक .navbar-centered शैली जोड़ने सीएसएस है:

@media (min-width: 768px) { 
    .navbar-centered .navbar-nav { 
     float: none; 
     text-align: center; 
    } 
    .navbar-centered .navbar-nav > li { 
     float: none; 
    } 
    .navbar-centered .nav > li { 
     display: inline; 
    } 
    .navbar-centered .nav > li > a { 
     display: inline-block; 
    } 
} 

उपयोग .navbar-centered शैली लगाने से नेवबार के लिए:

<div class="navbar navbar-default navbar-centered" role="navigation"> 
    ... 
</div>