बूटस्ट्रैप टैब सामग्री

Question

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

Answer 1

निम्नलिखित सीएसएस वास्तव में आप :)

जो खोज रहे हैं क्या करना चाहिए

.tab-content { 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    padding: 10px; 
} 

.nav-tabs { 
    margin-bottom: 0; 
} 

margin-bottom: 0;पर .nav-tabs गोलियों और सामग्री के बीच के अंतर को हटा देता है।

गद्दी.tab-सामग्री पर छोड़ दिया और सही पर नई सीमा के खिलाफ लगाए नहीं सामग्री बनाता है।

Answer 2

आप इसे प्राप्त करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
JSfiddle Demo

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { 
border-bottom-color:#ddd; 
outline:0; 
} 
} 

Answer 3

यह एक लंबे समय पहले कहा गया था लेकिन चाल यहाँ कुछ लोगों को मदद कर सकता है:

एक div.container में रख अपने .nav-tabs और .tab-content। उस div.container पर, एक निश्चित ऊंचाई दें 300px और border-bottom: 1px solid #ccc और overflow: hidden !important।

फिर .tab-content लिए, मैं इस सीएसएस जोड़ें: height: 100%; border-left: 1px solid #ccc ; border-right: 1px solid #ccc;

और यह काम करता है। मैं निम्नलिखित के लिए Kisuka के जवाब को संशोधित करेगा इसे आज़माने के (http://jsfiddle.net/996Bw/)

Answer 4

: कोड निम्नलिखित के साथ

.tab-pane { 

    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    border-radius: 0px 0px 5px 5px; 
    padding: 10px; 
} 

.nav-tabs { 
    margin-bottom: 0; 
} 

Answer 5

, सभी कोने की त्रिज्या है, लेकिन टैब ऑफसेट।

.nav-tabs { 
    padding-left: 15px; 
    margin-bottom: 0; 
    border: none; 
} 
.tab-content { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 15px; 
} 

सावधानी: यदि आप नव-टैब की गद्दी-बाएँ 0px सेट करते हैं, सामग्री के बाएं शीर्ष त्रिज्या के साथ पहला टैब विरोध करता है।

Answer 6

मैंने उत्तर को @ user3749683 और @ किसुका द्वारा संशोधित किया ताकि आपको किसी भी मौजूदा बूटस्ट्रैप शैलियों की परिभाषा को बदलने की आवश्यकता न हो। इसके बजाय, आप केवल मूल तत्व में एक नई कक्षा जोड़ते हैं। मैंने पहले बाल चयनकर्ताओं का उपयोग किया ताकि आप घोंसले वाले टैब प्राप्त कर सकें जिनके लिए सीमावर्ती सामग्री भी आवश्यक नहीं है।

.bordered-tab-contents > .tab-content > .tab-pane { 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    border-radius: 0px 0px 5px 5px; 
    padding: 10px; 
} 

.bordered-tab-contents > .nav-tabs { 
    margin-bottom: 0; 
} 

मार्कअप संरचना

<div class="bordered-tab-contents"> 
    <ul class="nav nav-tabs"> 
     ... 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane" ...> 
      ... 
     </div> 
    </div> 
</div> 

Answer 7

होने के नाते तो समाधान @goat अधिक सूखी, आप भी तरह पैनल सीएसएस का पुन: उपयोग कर सकते हैं:

.tab-content.panel 
{ 
    border-top: none; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
} 


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

    <div class="tab-content panel"> 
     <div class="tab-pane panel-body"> 
      ... 
     </div> 
    </div> 
</div> 

टैब-सामग्री पैनल पैनल-डिफ़ॉल्ट और टैब- फलक पैनल-बॉडी। फिर आपको सीमा और पैडिंग को फिर से परिभाषित करने की आवश्यकता नहीं है। बस शीर्ष सीमा और शीर्ष त्रिज्या को हटा दें।