Bootstrap 3 - сбой "переход"

Ответ 1

Перейти в collapse обусловлен .well классом CSS.

.well класс добавляет margin-bottom: 20px;, который вызывает скачок, когда свойство collapse получает свойство display:none. И padding of .well также играет роль в этом прыжке.

Чтобы сделать его collapse более плавным, добавьте класс .well внутри .collapse DIV как показано ниже, и это 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>

Ответ 2

Я обновил вашу скрипку, перейдя по ссылке, может быть, это может вам помочь.

JSFiddle

Поместите свой класс well с помощью элемента form и просто добавьте ниже CSS

Код CSS -

.well{
  margin-bottom:0px;
}

Ответ 3

У вас не должно быть никаких дополнений или полей на складном элементе. Это то, что вызывает эффект прыжка.

т.е.: в вашем случае у него есть дополнительные классы, которые добавляют отступы и поля.

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

Если вы хотите сохранить все текущие стили, такие как .well и т.д., лучше всего обернуть существующий сворачиваемый элемент вокруг другого тега и сделать родительский div разборным элементом,

См. обновленный пример:

В вашем случае вам понадобится .clearfix на сбрасываемом элементе, так как он имеет дочерний элемент, который будет переполняться из-за класса .well

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

Ответ 4

Привет, это ваш 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>

Ответ 5

Не должно быть padding-bottom or padding-top для этих div с классом .collapse. Это дополнение делает эффект перехода

Ответ 6

Это старая ошибка, которая не будет исправлена в версии 3. Установите margin-bottom для well на 0. Возможно, вам придется установить верхнее и нижнее поля и/или заполнение других элементов на 0, также в зависимости от где они относительно того, что вы разрушаете (в этом случае хорошо). Тебе просто придется поиграть, к сожалению.

Кроме того, если вы свернете/развернете несколько элементов близко друг к другу и захотите отрегулировать пространство между ними после установки полей и/или отступов в 0 (что будет все вместе), хак, который работает (но который я презираю, используя ) поместить пустой div между ними и вместо этого отрегулировать верхний и нижний отступы или поля.

Здесь вопрос о Github: https://github.com/twbs/bootstrap/issues/12093

Ответ 7

Удалите класс well из этого следующего div, он будет работать нормально; без эффекта прыжка.

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

По умолчанию refine-search-collapse-container div не принимает никакой высоты, но при нажатии на кнопку Refine Search, чтобы скрыть секцию refine-search-collapse-container, она принимает высоту "40 пикселей". Это вызывает проблему, поэтому эта проблема с прыжками произошла.