Question

任何人都可以帮助我解决过渡问题引导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>

Answer 1

此问题已在Bootstrap 4.0.0-beta上解决。 4.2.1版本现已上市！

有几种方法可以下载它：

Download the latest release in a zip file.
克隆回购邮件：git clone https://github.com/twbs/bootstrap.git
使用npm安装：npm install bootstrap
使用yarn安装：yarn add bootstrap@4.2.1
使用Composer安装：composer require twbs/bootstrap:4.2.1
使用NuGet安装：CSS：Install-Package bootstrap Sass：Install-Package bootstrap.sass

您可以查看Beta 1 ship list #21568链接以获取更多信息。

INITIAL ANSWER

Bootstrap v4.0.0-alpha.6版本出现错误，转换将在下一个版本中解决。

有关详细信息，请参阅issue 22256，pull 21743和v4.0.0-beta milestone链接。

暂时，您可以使用 @Nayana_Das 示例等变通办法。

Answer 2

使用以下代码折叠div：

if ( Auth::user()->cant('create_sys_admin', User::class) ) {
    return redirect()->back()->withErrors(['authorization' => 'You are not authorized to perform that action']);
}

查看此FIDDLE。

Answer 3

我最近也遇到了一个较旧的BT项目的问题。我的问题很简单，我有2个导航栏，并且都具有相同的ID（因为我将示例复制了两次）。

这里似乎不是这种情况，但我想我提到它是因为其他人可能会遇到此问题，并且存在相同的问题。

Answer 4

我遇到了同样的问题，不小心想到了一个解决方案。

 <div class="panel-group">
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title" style="padding: 10px;">
            <a data-toggle="collapse" href="#collapse1">Inbox</a>
          </h4>
           </div>
          <div id="collapse1" class="panel-collapse collapse" style="display: hidden;">
         <ul class="list-group">

           </ul>
        <!--<div class="panel-footer">Footer</div>-->
          </div>
          <div id="collapse1" class="panel-collapse collapse">
         <ul class="list-group">
            <li class="list-group-item">One</li>
         <li class="list-group-item">Two</li>
          <li class="list-group-item">Three</li>
           </ul>
        <!--<div class="panel-footer">Footer</div>-->
          </div>
         </div>
    </div>

在上面的代码中，我必须折叠id-> #collapse1 偶然地，我创建了两个div，当我重新加载页面时，第二个页面工作正常，第一个打开，但没有关闭，并给出了转换错误。因此，我只是删除了第一个#collapse1的内容并将其保留为空，而第二个则工作正常。我还尝试了其他选项，例如更新Bootstrap版本或更改div的位置，但没有一个起作用。我希望这有帮助。

谢谢

bootstraps 4错误：折叠正在转换

4 个答案: