Question

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

问题出在bootstrap中，我们定义了像

这样的网格

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

但是在flexslider2中我们需要包含li，例如

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

但是我想保留使用bootstrap网格，因为它具有响应性和位置更容易控制。那么，有可能保留我的网格但是应用flexslide吗？

即。在摇篮里，我想要4＆amp; 5在开头隐藏。

Answer 1

我不知道这是不是你想要的，但实际上FlexSlider有一个“选择器”选项，允许你将幻灯片包装成你想要的任何元素：

jsFiddle

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

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

Answer 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>

flexslider 2＆amp;引导网格兼容性

2 个答案: