बूटस्ट्रैप 3 - पतन 'कूद' व्यवहार

बूटस्ट्रैप की पतन सुविधा का उपयोग करते समय मुझे अजीब व्यवहार मिल रहा है। जब गिरने और uncollapsing, div एक 'कूद' व्यवहार प्रस्तुत करता है।बूटस्ट्रैप 3 - पतन 'कूद' व्यवहार

यह following fiddle में दिखाया गया है।

कोड यह

<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search"> 
    Refine Search 
    <span class="caret"></span> 
</button> 

<div class="collapse refine-search-collapse-container well" id="refine-search"> 
    <form class="form-horizontal"> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
      <option value="">ad</option> 
      <option value="">sfsd</option> 
      <option value="">sdf</option> 
      <option value="">sf</option> 
      <option value="">sdf</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
      <option value="">Blah1</option> 
      <option value="">Blah2</option> 
      <option value="">Blah3</option> 
      <option value="">Blah4</option> 
      <option value="">Blah5</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <input type="number" class="form-control"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-6"> 
     <select class="form-control"> 
      <option value="">Yes</option> 
      <option value="">No</option> 
     </select> 
     </div> 
    </div> 
    </form> 
</div> 

<div class=""> 
    <h3>Search Result</h3> 
</div>

स्रोत

2017-02-26 user2771150

कदम '' form' तत्व को well' वर्ग की वजह से कम - वहाँ समस्या लगती है कैसे करता है एनिमेटेड तत्व के बूटस्ट्रैप js संभाल ऊंचाई गणना ... बेकार - इस तरह की चीजें एक कारण है कि मैं सभी बूस्ट्रैप-जैसे सीएसएस/जेएस ढांचे से दूर रहती हूं और सब कुछ लिखने के लिए preffer। - आह, यहां तक कि खोज परिणाम टेक्स्ट से छुटकारा नहीं मिलता है, विस्तार पर थोड़ी सी कूद। –

कूद बनाता है।

.well वर्ग margin-bottom: 20px; जोड़ता है जो collapsedisplay:none संपत्ति प्राप्त करता है जब कूदता है। और padding.well भी इस कूद में भूमिका निभाता है।

यह collapse चिकनी, .collapseDIV अंदर .well वर्ग को जोड़ने के रूप में नीचे दिखाया गया है बनाने के लिए, और इस CSS।

इसे जल्दी, .well वर्ग margin-bottom, padding, and min-height जो कूद का कारण बनता है कहते हैं, यह display:none में बॉक्स-मॉडल को प्रभावित करता है के रूप में आगे बढ़ाने के लिए।

.refine-search-collapse-container .well { 
 
    margin-bottom: 0; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 
 

 

 
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search"> 
 
    Refine Search 
 
    <span class="caret"></span> 
 
</button> 
 

 
<div class="collapse refine-search-collapse-container" id="refine-search"> 
 
    <form class="form-horizontal well"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control"> 
 
      <option value="">ad</option> 
 
      <option value="">sfsd</option> 
 
      <option value="">sdf</option> 
 
      <option value="">sf</option> 
 
      <option value="">sdf</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control"> 
 
      <option value="">Blah1</option> 
 
      <option value="">Blah2</option> 
 
      <option value="">Blah3</option> 
 
      <option value="">Blah4</option> 
 
      <option value="">Blah5</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <input type="number" class="form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6"> 
 
     <select class="form-control"> 
 
      <option value="">Yes</option> 
 
      <option value="">No</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 

 
<div class=""> 
 
    <h3>Search Result</h3> 
 
</div>

स्रोत

2017-03-16 05:50:32

-2

निकालें "अच्छी तरह से" इस निम्नलिखित div से वर्ग, यह ठीक .. कोई कूद प्रभाव काम करेंगे ..

<div class="collapse refine-search-collapse-container well" id="refine-search">

डिफ़ॉल्ट रूप से, "को परिष्कृत-खोज- पतन-कंटेनर "div कोई ऊंचाई नहीं ले रहा है, लेकिन जब" परिष्कृत-खोज-पतन-कंटेनर "अनुभाग को छिपाने के लिए" परिष्कृत खोज "बटन पर क्लिक करें, तो यह ऊंचाई" 40px "लेता है। यह समस्या पैदा करता है। तो यह कूद मुद्दा जारी हुआ है।

स्रोत

2017-02-26 07:55:30 Piyali

बेहतर - अच्छी कक्षा को फॉर्म तत्व में ले जाएं। - वही दिखता है, समस्या से छुटकारा पाता है –

हाय इस अद्यतन के बाद अपने fiddle है।

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 

     <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search"> 
     Refine Search 
     <span class="caret"></span> 
     </button> 
    </div> 

    <div class="clearfix"></div> 

    <div class="col-xs-12"> 
     <form class="form-horizontal collapse" id="refine-search"> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <select class="form-control"> 
       <option value="">ad</option> 
       <option value="">sfsd</option> 
       <option value="">sdf</option> 
       <option value="">sf</option> 
       <option value="">sdf</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <select class="form-control"> 
       <option value="">Blah1</option> 
       <option value="">Blah2</option> 
       <option value="">Blah3</option> 
       <option value="">Blah4</option> 
       <option value="">Blah5</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <input type="number" class="form-control"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-6"> 
      <select class="form-control"> 
       <option value="">Yes</option> 
       <option value="">No</option> 
      </select> 
      </div> 
     </div> 
     </form> 
    </div> 

    <div class="clearfix"></div> 

    <div class="col-xs-12"> 
     <h3>Search Result</h3> 
    </div> 
    </div> 
</div>

स्रोत

2017-03-13 09:09:53 mcmac

कक्षा .collapse के साथ उन लोगों के लिए किसी भी div padding-bottom or padding-top नहीं होना चाहिए: की तरह अपने कोड लग जाना चाहिए। यही कारण है कि गद्दी में अपने collapse.well वर्ग सीएसएस की वजह से है कूद प्रभाव

स्रोत

2017-03-16 05:33:19 Abinthaha

कोई सापेक्ष उत्तर नहीं – Gaurav

मैं अद्यतन किया है अपने बेला लिंक नीचे के माध्यम से जाना यह आपकी मदद कर सकते हो सकता है।

JSFiddle

form तत्व के साथ अपने well वर्ग रखो और सिर्फ सीएसएस नीचे जोड़ने

सीएसएस Code-

.well{ 
    margin-bottom:0px; 
}

स्रोत

2017-03-16 06:05:37

आप सिमटने तत्व पर किसी भी गद्दी या मार्जिन नहीं होना चाहिए। यह जंप प्रभाव पैदा कर रहा है।

यानी: आपके मामले में, इसमें अतिरिक्त कक्षाएं हैं जो पैडिंग और मार्जिन जोड़ती हैं।

<div class="refine-search-collapse-container well collapse">

आप इस तरह के .well आदि जैसे सभी मौजूदा शैलियों को संरक्षित करना चाहते हैं, तो यह एक और टैग के आसपास अपने मौजूदा सिमटने तत्व लपेट और माता पिता div सिमटने तत्व बनाने के लिए, सबसे अच्छा है

अद्यतन उदाहरण देखें:

आपके मामले में आपको .clearfix को ढहने योग्य तत्व पर आवश्यकता होगी क्योंकि इसमें एक बच्चा है जो ओवरफ होगा .well वर्ग

http://jsfiddle.net/vuk1dbag/19/

स्रोत

2017-03-20 08:35:43 arithran

बूटस्ट्रैप 3 - पतन 'कूद' व्यवहार

उत्तर

संबंधित मुद्दे