flexslider2 和引导网格兼容性答案

【问题标题】：flexslider2 & bootstrap grid compabailityflexslider2 和引导网格兼容性
【发布时间】：2014-04-19 04:52:33
【问题描述】：

我定义了一个简单的引导网格：jsFiddle

问题出在 bootstrap 中，我们像定义网格一样

<div class="row">
    <div class="col-md-4">
    ...

但在 flexslider2 中我们需要换行成li，例如

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>

但我想保留引导网格的使用，因为它具有响应性并且位置更易于控制。那么，是否可以保留我的网格但在其上应用 flexslide？p>

即总之，我希望在开头隐藏 4 和 5。

【问题讨论】：

Flexslider 2 是响应式的。您的示例显然缺少某些内容。期望的输出是什么？
@Ryan 对此做了一些调整，Flexslider 2 将使所有元素消失以进行迭代。事实上，正如 Carrie Kendall 提到的那样，flexslider 具有响应性，它将拉伸到其包含列的 100% 宽度。

标签： javascript css twitter-bootstrap twitter-bootstrap-3 flexslider

【解决方案1】：

我不知道这是否是您所追求的，但实际上 FlexSlider 有一个“选择器”选项，可让您将幻灯片包装到您想要的任何元素中：

jsFiddle

$('.flexslider').flexslider({
  selector: ".slides > div.col-md-4"
});

无论如何，也许 Bootstrap 样式会干扰 Flexslider（因为 Flexslider 会在加载时设置幻灯片的宽度），所以不确定这是否是个好主意。为幻灯片定义特定样式可能更容易。

【讨论】：

正是需要的。应该被标记为答案。谢谢！

【解决方案2】：

我没有看到您遇到的问题，但我已经更新了您的jsfiddle。

您应该将整个 flexslider 放入列中：

<div class="row">
    <div class="col-md-4">
        <div class="flexslider">
            <ul class="slides">
                <li>
                    <img ... />
                </li>
                <li>
                    <img ... />
                </li>
                <li>
                    <img ... />
                </li>
            </ul>
        </div>
    </div>
</div>

【讨论】：