Bootstraps 4 Ошибка: происходит сбой

Может ли кто-нибудь помочь мне, пожалуйста, перейти к начальной загрузке проблемы загрузки 4. это приводит к ошибке Неисправность: сбой при переходе проблема возникает только тогда, когда не включать bootstrap css. в моем случае bootstrap css конфликтует с моим большим css. может кто-нибудь помочь выложить этот ад

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Ответ 1

Эта проблема была решена в Bootstrap 4.0.0-бета. Версия 4.2.1 доступна сейчас!

Есть несколько способов скачать его:

Загрузите последнюю версию в zip файле.
Клонировать репозиторий: git clone https://github.com/twbs/bootstrap.git
Установить с помощью npm: npm install bootstrap
Установить с помощью пряжи: yarn add [email protected]
Установить с помощью Composer: composer require twbs/bootstrap:4.2.1
Установить с помощью NuGet: CSS: Install-Package bootstrap Sass: Install-Package bootstrap.sass

Вы можете увидеть ссылку на бета-версию корабля № 21568 для получения дополнительной информации.

НАЧАЛЬНЫЙ ОТВЕТ

Произошла ошибка в версии Bootstrap v4.0.0-alpha.6 с переходом, который будет решен в следующем выпуске.

Для получения дополнительной информации см. Ссылки на этапы 22256, pull 21743 и v4.0.0-beta.

Какое-то время вы можете использовать обходные пути, такие как пример @Nayana_Das.

Ответ 2

Свернуть div, используя следующий код:

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Посмотрите FIDDLE.

Ответ 3

У меня недавно также была проблема со старым проектом BT. Моя проблема была просто в том, что у меня было 2 панели навигации, и у обоих был один и тот же идентификатор (как я дважды скопировал пример).

Похоже, что это не так, но я подумал, что упомянул об этом, потому что кто-то еще может столкнуться с этим вопросом и имеет такую же проблему.