Bootstrap Carousel 正在破坏 Chrome 中的 CSS 列答案

【问题标题】：Bootstrap Carousel is destroying CSS columns in ChromeBootstrap Carousel 正在破坏 Chrome 中的 CSS 列
【发布时间】：2015-08-21 08:49:36
【问题描述】：

我有一个使用 TWBS 轮播和 2 列列表的引导项目。

代码是这样的：

<div id="header-carousel" class="carousel slide" data-ride="carousel" data-interval="1200">
    [Carousel stuff here ...]
</div>
<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <h3>Cities in Germany</h3>
                <hr />
                <div class="multiCol">
                    <ul class="list-styled">
                        <li><a href="#">Berlin</a></li>
                        <li><a href="#">Hamburg</a></li>
                        <li><a href="#">Munich</a></li>
                        <li><a href="#">Cologne</a></li>
                        <li><a href="#">Kempten</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

你可以在这里找到完整的代码：http://jsfiddle.net/61sxephp/

我在 Firefox 和 Chrome 中对其进行了测试。 Firefox 按预期显示它，Chrome 在 Carousel 滑动时将列表显示在 2 列中，否则在 1 列中显示。

我不明白为什么......

是否可以在 Chrome 中同时使用这些组件？

【问题讨论】：

标签： javascript css twitter-bootstrap google-chrome carousel

【解决方案1】：

这似乎是一个几乎与此类似的错误：CSS Column layout blinks on dissapear on hover with transform and transition.

该线程中的临时解决方案是在子项中添加transform: translatez(0)。

.list-styled > li {
  position: relative;
  transform: translateZ(0);
}

Updated JSfiddle

【讨论】：