bootstrap 3 - "sakrash" xatti-harakati

Bootstrap-ning yiqilishi xususiyati ishlatilganda g'alati harakatga tushaman. Chiqarib yuborilganda, div "o'tish" xatti-harakatini ko'rsatadi.

Bu quyidagi fiddle da ko'rsatiladi.

Mana kod

<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search">
  Refine Search
  
</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">
        
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        
      </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">
        
      </div>
    </div>
  </form>
</div>

<div class="">
  

Search Result

</div>
14
formasi elementiga well sinfini ko'chirish - muammo bo & # 39; luvchi JS animatsiya elementining balandlik hisobini qanday bajarayotgani kabi ko'rinadi ... Sucks - bu kabi narsalar barcha sabablarga ko'ra CSS/js ramkalaridan uzoqlashtiraman va o'zim har bir narsani yozishim uchun preffer. - Ha, bu ham Izlash natijasi matnidan qutilish uchun bir oz sakrab chiqmaydi.
qo'shib qo'ydi muallif Adam K., manba

7 javoblar

collapse o'tish kodi .well CSS CSS-ga bog'liq.

.well class adds margin-bottom: 20px; which causes jump when the collapse gets display:none property. And the padding of .well also plays role in this jump.

collapse ni yanada yumshoq qilish uchun .collapse DIV ichida .well quyida ko'rsatilgandek, va bu CSS .


.well sinfni tez ko'tarish uchun jump ni keltiradigan margin-bottom, padding va min-height qo'shimchalar, display: none ustida ishlaydigan model.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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
  
</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">
        
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        
      </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">
        
      </div>
    </div>
  </form>
</div>

<div class="">
  

Search Result

</div>
</div> </div>

11
qo'shib qo'ydi

Sizning skripkangizni quyida joylashgan link orqali yangilashingiz sizga yordam berishi mumkin.

JSFiddle

form elementini formasi elementiga qo'ying va CSS-ning pastki qismiga qo'shing

CSS kodi-

.well{
  margin-bottom:0px;
}
2
qo'shib qo'ydi

Quyidagi divdan "yaxshi" sinfni olib tashlang, u yaxshi ishlaydi ... hech qanday o'tish effekti yo'q ..

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

By default, "refine-search-collapse-container" div not taking any height but when click on "Refine Search" button to hide "refine-search-collapse-container" section, it takes a height "40px". it creats problem. so this jumping issue is happened.

enter image description here

2
qo'shib qo'ydi
Yaxshi - yaxshi sinfni ariza elementiga o'tkazing. - xuddi shunday ko'rinadi, muammoni bartaraf qiladi
qo'shib qo'ydi muallif Adam K., manba

Katlanabilen elementga biron-bir to'ldirish yoki chekkaning bo'lmasligi kerak. Bu o'tish effektiga sabab bo'lgan narsa.

ya'ni, sizning holatlaringizda qo'shimcha to'ldiruvchi va to'ldirishni qo'shadigan qo'shimcha sinflar mavjud.

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

If you want to preserve all the current styles such as .well etc, it's best to wrap your existing collapsible element around another tag and make the parent div the collapsible element,

See updated example:

In your case you would need a .clearfix on the collapsible element since it has a child that will overflow because of the .well class

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

1
qo'shib qo'ydi

Class bilan divga biron bir padding-bottom yoki padding-top bo'lmasligi kerak .collapse. Ushbu plomba o'tish effektini yaratadi

0
qo'shib qo'ydi
Nisbatan javob emas
qo'shib qo'ydi muallif Gaurav, manba

Salom, yangilanishdan so'ng fiddle . Sizning kodingiz quyidagicha bo'lishi kerak:

<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
        
      </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">
            
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            
          </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">
            
          </div>
        </div>
      </form>
    </div>

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

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

Search Result

    </div>
  </div>
</div>
0
qo'shib qo'ydi

Bu eski versiya 3-versiyada o'rnatilmaydi. pastki kodini pastki 0 ga o'rnating. Yuqoridagi va pastki chetida chekkalarini o'rnatishingiz kerak bo'lishi mumkin va/yoki boshqa unsurlarni 0-ga to'ldirishingiz mumkin, bu esa sizning qulab tushgan narsangizga nisbatan (bu holda quduqqa) bog'liqdir. Afsuski, o'ynashingiz kerak.

Bundan tashqari, siz bir-biriga yaqin bo'lgan bir nechta elementlarni yiqitib, kengaytirmoqchi bo'lsangiz va ular o'rtasidagi masofani marjinani belgilashingiz va/yoki bo'shashgandan so'ng 0 (bu har bir narsani bir-biriga bog'laydigan), ) o'rtasida bo'sh div qo'yish va buning o'rniga yuqori va pastki plomba yoki chekka bo'shlig'ini sozlash.

Here's the issue on Github: https://github.com/twbs/bootstrap/issues/12093

0
qo'shib qo'ydi