बूटस्ट्रैप पतन और पैडिंग समस्या

Question

मैं संक्रमण के साथ पतन का उपयोग कर रहा हूं। नीचे दिया गया कोड काम करता है, लेकिन मेरे स्टाइलशीट में 10px पैडिंग है क्योंकि मैं div collapse को देखता हूं लेकिन इससे पहले 10px रोकना चाहिए और फिर गायब होना चाहिए। रिवर्स विस्तार पर सही है क्योंकि div सही आकार पर वापस स्नैप करने से पहले 10px से अधिक तक फैलता है।

एचटीएमएल

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox"> 
          Lorem ipsum ... 
</div> 

सीएसएस

.box-content{ 
    background: red; 
    padding: 10px; 
} 

Answer 1

आसान है - बस पतन एक जो स्टाइल

Answer 2

आप HTML संरचना को बदलने के लिए नहीं करना चाहते हैं है अंदर एक और div जोड़ने के लिए, इन शैलियों को जोड़ें:

/* Override bootstrap collapse to keep margins */ 
.collapse.in { 
    display: inherit; 
    visibility: visible; 
} 
.collapse { 
    display: inherit; 
    visibility: hidden; 
} 

एनीमेशन खत्म होने पर बूटस्ट्रैप सेट किसी को भी प्रदर्शित नहीं करता है, जो पैडिंग समेत पूरे div को हटा देता है। छिपाने के लिए दृश्यता सेट करना div को नहीं हटाता है, लेकिन इसकी ऊंचाई 0 है, इसलिए सभी बाएं हैं।

सुनिश्चित करें कि इन शैलियों को बूटस्ट्रैप स्टाइलशीट के बाद परिभाषित किया गया है।

Answer 3

आपको अपनी सामग्री को .collapse में लपेटना होगा और यदि आप पैडिंग करना चाहते हैं, तो आप अपने रैपर के सीएसएस को सेट कर सकते हैं।

एचटीएमएल

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox"> 
    <div class='wrapper'>     
    Lorem ipsum ... 
    </div> 
</div> 

सीएसएस

.wrapper{ 
    padding: 10px; 
}