मैं पेज पर ट्विटर बूटस्ट्रैप टैब कैसे केंद्रित कर सकता हूं?

Question 1

टॉगल टैब बनाने के लिए मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं। यहाँ css मैं उपयोग कर रहा हूँ:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

यह html सही ढंग से टैब प्रदर्शित करता है, लेकिन बाईं ओर खींचा जाता है (जो होना चाहिए था)। मैंने पृष्ठ पर केंद्र में टैब प्राप्त करने के लिए सीएसएस के साथ छेड़छाड़ करने की कोशिश की है, लेकिन अभी तक कोई भाग्य नहीं है। मैंने सोचा कि अधिक सीएसएस अनुभव वाले किसी को पता होगा कि यह कैसे करना है।

एक नोट के रूप में, नौसेना की गोलियों को केंद्रित करने के बारे में एक और सवाल है, जो मैंने कोशिश की थी, लेकिन यह सिर्फ सादे नौसेना टैब के साथ काम नहीं किया।

धन्यवाद।

Question 2

nav-tabsलिस्ट आइटम स्वचालित रूप से बूटस्ट्रैप द्वारा बाईं ओर फ्लोट किए जाते हैं, इसलिए आपको इसे रीसेट करना होगा और इसके बजाय इन्हें प्रदर्शित करना होगा inline-block, और मेनू आइटमों में हमें text-align:centerकंटेनर की विशेषता को जोड़ना होगा , जैसे:

सीएसएस

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

डेमो: http://jsfiddle.net/U8HGz/2/show/ यहाँ संपादित करें: http://jsfiddle.net/U8HGz/2/

संपादित करें: IE7 + में काम करने वाले पैच किए गए संस्करण को उपयोगकर्ता @My हेड द्वारा प्रदान किया गया है, नीचे टिप्पणी में नीचे दिया गया है।

डेमो: http://jsfiddle.net/U8HGz/3/show/ यहाँ संपादित करें: http://jsfiddle.net/U8HGz/3/

Question 3

स्वीकृत उत्तर एकदम सही है। इसे और अधिक अनुकूलित किया जा सकता है ताकि आप इसे मानक बाईं ओर संरेखित टैब के साथ कंधे से कंधा मिलाकर उपयोग कर सकें।

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

इसका उपयोग करने के लिए, "टैब" वर्ग को अपने टैब तत्व में जोड़ें

<ul class="nav nav-tabs centered" >
..
</ul>

Question 4

nav-justifiedमेरे लिए क्लास जोड़ना काम करता है। यह न केवल केंद्र को टैब संरेखित करता है, बल्कि यह उन्हें शीर्ष पर अच्छी तरह से फैलाता है।

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

भले ही स्वीकृत उत्तर अच्छी तरह से काम करता है, मुझे बूटस्ट्रैप के लिए उपरोक्त अधिक प्राकृतिक मिला।

Question 5

बस जोड़ रहा है

margin-left:50%;

जब मैंने अपना टैब सेट किया, तो मेरे लिए काम किया।

उदाहरण के लिए

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

Question 6

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

<div class="col-sm-4 col-sm-offset-4">।

इसलिए आपके पृष्ठ के मध्य में आपका नेविगेशन मिल रहा है (यह भी उत्तरदायी समाधान) बाईं ओर दाईं ओर 4 कॉलम के साथ।

मैंने ग्रिड को उत्तरदायी वेब पेज बनाने के लिए वास्तव में उपयोगी पाया। सौभाग्य!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

Question 7

यदि आप bs4 का उपयोग करते हैं तो बस आप justify-content-centerइसे पृष्ठ पर केंद्रित करने के लिए अपने नव-टैब में कक्षा जोड़ सकते हैं । यदि आप चाहते हैं कि आपके टैब न्यायसंगत हों (पूर्ण-के साथ) nav-justifiedइसमें कक्षा जोड़ते हैं , तो इस स्थिति में यदि आपके नौसेना में 3 आइटम हैं, तो उनमें से प्रत्येक के साथ 33% है। अगर 5 आइटम है तो हर एक के साथ 20% है।

एक और तरीका बस जोड़ने के लिए है text-centerअगर आप bs3 का उपयोग कर रहे हैं ।

Question 8

Bootstrap में इस नाम के संबंध में एक वर्ग है nav-justified। बस इसे इस तरह जोड़ें:

<ul class="nav nav-tabs nav-justified">

आप के <li>रूप में अच्छी तरह से केंद्र की सामग्री को संरेखित करना चाहते हैं , तो इसे बनाते हैं disply: inline-block।

Question 9

इसे इस्तेमाल करे:

<ul class="nav nav-tabs justify-content-center">