बूटस्ट्रैप

Question

के साथ सीमा का उपयोग कैसे करें मैं इस समस्या को कैसे हल कर सकता हूं? जब आप किसी div को सीमा जोड़ते हैं, तो div केंद्रित नहीं होता है और span12 कक्षा केंद्रित नहीं है।

मैं सीमाओं

<div class="row" > 
    <div class="span12" style="border: 2px solid black"> 
     <div class="row"> 
      <div class="span4"> 
      1 
     </div> 
     <div class="span4"> 
      2 
     </div> 
     <div class="span4"> 
      3 
     </div> 
     </div> 

    </div> 


</div> 

Answer 1

तुम बस अवधि के लिए एक सीमा नहीं जोड़ सकते हैं के साथ div केंद्र के लिए है क्योंकि यह रास्ता चौड़ाई की वजह से लेआउट टूट जाएगा चाहते हैं calculate है: चौड़ाई = सीमा + पैडिंग + चौड़ाई। चूंकि कंटेनर 940 पीएक्स है और अवधि 940 पीएक्स है, 2 पीएक्स सीमा जोड़कर (इसलिए 4 पीएक्स पूरी तरह से) इसे केंद्र से दूर कर देगा। चारों ओर का काम चौड़ाई को 4 पीएक्स सीमा (मूल - 4 पीएक्स) शामिल करने के लिए बदलना है या उसके अंदर एक और div है जो 2px सीमा बनाता है।

Answer 2

सीएसएस में एक संपत्ति है जिसे box-sizing. कहा जाता है यह आपके पृष्ठ पर किसी तत्व की कुल चौड़ाई निर्धारित करता है। डिफ़ॉल्ट मान content-box है, जिसमें तत्व की पैडिंग, मार्जिन या सीमा शामिल नहीं है।

इसलिए, यदि आप एक div चारों ओर width: 500px और 20px पैडिंग की निर्धारित करते हैं, इसे 540px अपनी वेबसाइट (500 + 20 + 20) पर ले जाएगा।

यही आपकी समस्या का कारण बन रहा है। बूटस्ट्रैप उपर्युक्त उदाहरण की तरह चीजों के लिए सेट चौड़ाई की गणना करता है, और इन चीजों में सीमाएं नहीं होती हैं। चूंकि बूटस्ट्रैप एक पहेली की तरह एक साथ फिट बैठता है, इसलिए पक्षों में से एक को सीमा जोड़कर 501 पीएक्स की कुल चौड़ाई (उपरोक्त उदाहरण जारी है) और अपना लेआउट तोड़ देगा।

इसे ठीक करने का सबसे आसान तरीका है अपने box-sizing को समायोजित करना। आप जिस मान का उपयोग करेंगे वह box-sizing: border-box है। इसमें आपके बॉक्स तत्वों में पैडिंग और सीमा शामिल है। You can read more about box-sizing here.

इस समाधान के साथ एक समस्या यह है कि यह केवल IE8 + पर काम करता है। नतीजतन, यदि आपको गहन आईई समर्थन की आवश्यकता है तो आपको अपनी सीमा के लिए बूटस्ट्रैप चौड़ाई को ओवरराइड करने की आवश्यकता होगी।

एक नई चौड़ाई की गणना करने का उदाहरण देने के लिए, अपने तत्व पर बूटस्ट्रैप सेट की चौड़ाई की जांच करके शुरू करें। आइए मान लें कि यह span6 है और इसकी चौड़ाई 320px है (यह पूरी तरह से काल्पनिक है, आपके span6 की वास्तविक चौड़ाई बूटस्ट्रैप की आपकी विशिष्ट कॉन्फ़िगरेशन पर निर्भर करेगी)। आप वहाँ पर एक 20px गद्दी के साथ दाहिने हाथ की ओर एक भी सीमा जोड़ना चाहते थे, तो आप अपने स्टाइलशीट

.span6 { 
    padding-right: 20px; 
    border-right: 1px solid #ddd; 
    width: 299px; 
} 

में इस सीएसएस लिखते हैं, जहां नई चौड़ाई करके की जाती है:

old width - padding - border

Answer 3

हालांकि यह संभवतः सही ऐसा करने का तरीका नहीं है, ऐसा कुछ जो मैंने एक सरल कामकाज पाया है, बस सीमा के बजाय एक बॉक्स-छाया का उपयोग करना है ... यह ग्रिड सिस्टम को तोड़ नहीं देता है ।उदाहरण के लिए, आपके मामले में:

एचटीएमएल

<div class="container"> 
    <div class="row" > 
     <div class="span12"> 
      <div class="row"> 
       <div class="span4"> 
        1 
       </div> 
       <div class="span4"> 
        2 
       </div> 
       <div class="span4"> 
        3 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

सीएसएस

.span12{ 
    -moz-box-shadow: 0 0 2px black; 
    -webkit-box-shadow: 0 0 2px black; 
    box-shadow: 0 0 2px black; 
} 

Fiddle

Answer 4

दुर्भाग्य से, कि सीमाओं क्या करते हैं, वे के हिस्से के रूप में गिना रहे हैं एक तत्व लेता है। मुझे सीमा के कम ज्ञात चचेरे भाई को पेश करने की अनुमति दें: outline। यह सीमा के समान रूप से समान है। केवल अंतर यह है कि यह बॉक्स-छाया की तरह व्यवहार करता है जिसमें यह आपके लेआउट में जगह नहीं लेता है और यह तत्व के सभी चार पक्षों पर होना चाहिए।

http://codepen.io/cimmanon/pen/wyktr

.foo { 
    outline: 1px solid orange; 
} 

Answer 5

दूसरों सीमा बनाम सीमा बॉक्स के बारे में क्या उल्लेख किया है निश्चित रूप से सही है। आप अभी भी इस हालांकि किसी भी कस्टम कक्षाएं बनाने के लिए बिना काम करने के लिए प्राप्त कर सकते हैं: http://jsfiddle.net/panchroma/yfzdD/

एचटीएमएल

<div class="container"> 
<div class="row" > 
    <div class="span12"> 
     <div class="row"> 
     <div class="span4"> 1 </div> 
     <div class="span4"> 2 </div> 
     <div class="span4"> 3 </div> 
     </div><!-- end nested row --> 
    </div><!-- end span 12 --> 

</div> <!-- end row --> 
</div><!-- end container --> 

सीएसएस

.span12{ 
border:solid 2px black; 
background-color:grey; 
} 

गुड लक!

Answer 6

बूटस्ट्रैप 3 के रूप में, आप पैनल वर्गों का उपयोग कर सकते हैं:

<div class="panel panel-default">Surrounded by border</div>

Answer 7

निर्भर करता है क्या आकार आप अपने div होने के लिए के साथ साथ, आप, बूटस्ट्रैप के अंतर्निहित घटक thumbnail वर्ग का उपयोग कर सकते हैं (या बिना) ग्रिड सिस्टम आपके div आइटमों में से प्रत्येक के आसपास सीमाएं बनाने के लिए।

These examples बूटस्ट्रैप की वेबसाइट पर प्रदर्शित करता है कि किसी विशेष अतिरिक्त CSS के लिए आसानी से उपयोग और ज़रूरत का अभाव:

<div class="row"> 
    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
      <img src="..." alt="..."> 
     </a> 
    </div> 
    ... 
</div> 

जो निम्नलिखित div ग्रिड आइटम का उत्पादन:

या कुछ addit जोड़ें ional सामग्री:

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="..." alt="..."> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>...</p> 
     <p> 
      <a href="#" class="btn btn-primary" role="button">Button</a> 
      <a href="#" class="btn btn-default" role="button">Button</a> 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

जो निम्नलिखित div ग्रिड आइटम का उत्पादन: