Div在Bootstrap Carousel中不可见（移动视图）

Question

• 的 UPDATE !!!见下文!!!

更新：我发现了问题，但仍然不知道如何解决它。

所以，我和以前一样有问题;我有2个主要的div（desktopDiv和mobileDiv），其中我有3个div（流，IDE，聊天）为我的部分。

当我在桌面视图和移动视图中的Stream div中添加iframe视频时，我的移动视图为空白。但是，如果我在桌面视图中注释掉iframe，则该部分会在移动视图中显示出来！ 当我向桌面视图和移动视图添加松弛聊天时，我的移动视图是空白的（这个仍然有问题）...现在我的IDE部分也遇到了同样的问题！

由于我没有为桌面和移动设备使用相同的div，我想因为我的结构而导致冲突结束......就像Bootstrap由于副本而产生冲突。但是我该如何解决呢？

（查看下面的小提琴，你可以看到我的结构）

* ----------以下老问题----------- *

我正试图在移动视图中将一个div显示在Bootstrap的旋转木马内，但它是空白的。背景颜色（黄色）我在它的div中添加了dev。目的是可见的，但不是内容本身。

以下是添加的语法：

<div tabindex="3" class="col-sm-12 col-md-12 col-lg-12 desktopIDE" id="desktopIDE">
    <div class="textAreaDiv" id="textAreaDiv">
      <textarea class="col-sm-12 col-md-12 col-lg-12 textArea" id="code" style="display:none">
        conf io as button
          pin = 0

        conf io as led
          pin = 1;

        task read_button on button
      </textarea>
      <div id="editor"></div>
    </div>
</div> <!-- desktopIDE -->

这是桌面上的div / view，这是想要的行为：

但是在Chrome中的移动设备模式下，我看到了：

但是你可以看到当我按下“IDE”按钮（或滑动）并且当div滑动到位时，正确的背景颜色显示为毫秒，只是为了消失下一个：

我确定我的css在某处出错... 我在这里把HTML和CSS放在一个jsfiddle中： https://jsfiddle.net/kcw406hc/

P.S。值得注意的是，由于div的特定通缉行为，我不在桌面视图和移动设备上使用相同的div。