web-dev-qa-db-fra.com

bootstrap 3 - comportement "sauté" d'effondrement

J'obtiens un comportement étrange lorsque j'utilise la fonctionnalité d'effondrement de bootstrap. Lors de la réduction et de la réduction, la div présente un comportement de «saut».

Ceci est montré dans le suivant le violon.

Voici le code

<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>
htmlcsstwitter-bootstrap
17
user2771150

Le Jump dans votre collapse est dû à .well classe CSS.

La classe .well ajoute margin-bottom: 20px;, ce qui provoque un saut lorsque la variable collapse obtient la propriété display:none. Et la padding de .well joue également un rôle dans ce saut.

Pour rendre collapse plus lisse, ajoutez la classe .well à l'intérieur de .collapseDIVas ci-dessous, et cette CSS.

Pour l'escalader rapidement, la classe .well ajoute margin-bottom, padding, and min-height, ce qui provoque jump , car elle affecte le modèle de boîte sur 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>

12
Deepak Yadav

J'ai mis à jour votre lien de violon via lien ci-dessous peut-être qu'il peut vous aider.

JSFiddle

Mettez votre classe well avec l'élément form et ajoutez simplement ci-dessous CSS

Code CSS-

.well{
  margin-bottom:0px;
}
2
Shubham Baranwal

Vous ne devriez pas avoir de remplissage ou de marges sur l'élément réductible. C'est ce qui cause l'effet de saut. 

c'est-à-dire: dans votre cas, il a des classes supplémentaires qui ajoutent un remplissage et des marges.

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

Si vous souhaitez conserver tous les styles actuels tels que .well, etc., il est préférable d’envelopper votre élément compressible existant autour d’une autre balise et de définir le parent div comme élément compressible, 

Voir exemple mis à jour:

Dans votre cas, vous auriez besoin d'un .clearfix sur l'élément réductible car il a un enfant qui débordera à cause de la classe .well

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

1
arithran

Il ne devrait pas y avoir de padding-bottom or padding-top à ceux avec la classe .collapse. Ce rembourrage rend l'effet Jump 

0
Abinthaha

Ceci est un ancien bug qui ne sera pas corrigé dans la version 3. Définissez le margin-bottom de la well sur 0. Vous devrez peut-être définir les marges supérieure et inférieure et/ou le remplissage des autres éléments sur 0 également en fonction de l'endroit où ils sont relatifs à ce que vous vous effondrez (dans ce cas, le puits). Vous aurez juste à jouer, malheureusement. 

De plus, si vous réduisez/développez plusieurs éléments proches les uns des autres et que vous souhaitez ajuster l'espace entre eux après avoir défini les marges et/ou le remplissage à 0 (ce qui va tout encombrer), un hack qui fonctionne (mais que je déteste utiliser ) est de mettre une div vide entre eux et d’ajuster les marges ou marges supérieures et inférieures à la place. 

Voici le problème sur Github: https://github.com/twbs/bootstrap/issues/12093

0
nmit026

Bonjour c'est votre violon après la mise à jour. Votre code devrait ressembler à:

<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>
0
mcmac