Question

我已经开始使用来自zurb的Foundation 3，但我的滑块左侧有文字，左侧有图像（而不是图像和顶部的标签）。

当我减小浏览器窗口的大小时，它除了滑块的高度外都适合。

我们需要的是在小型浏览器上使滑块更高（它需要是相同的滑块 - 不是替代）。

我知道流体滑块中有流体选项，我怀疑如果我改变它，就足以解决这个问题了。

我如何实现这一目标？

以下是我的滑块HTML代码：

<div class="row">
  <div class="twelve columns">
    <div id="slider">
        <!-- *** This is the slider that needs to fit smaller browsers ***-->
        <div class="row" style="background-color:White;">
            <div class="six columns">
                <h2>Title</h2>
                <div class="summary">
                    This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
                    <a href="javascript:void(0);">Learn more</a>
                </div>
                <div class="some-thumbnails">
                    <img src="http://placehold.it/100x100&text=[thumbnail]" />
                    <img src="http://placehold.it/100x100&text=[thumbnail]" />
                    <img src="http://placehold.it/100x100&text=[thumbnail]" />
                </div>
            </div>
            <div class="six columns">
                <img src="http://placehold.it/550x250&text=[img 1]" />
            </div>
        </div>
        <img src="http://placehold.it/1000x400&text=[img 1]" />
    </div>
</div>

<hr />

Answer 1

轨道由轨道插件使用的某个插件生成的图像控制。我所做的是更改插件以获得最高幻灯片的左右部分的高度（当更改为电话视图时），然后将data-src设置为“holder.js / [width] x [height]”并调用Holder.run（）方法。

具有响应式设计的基础轨道滑块

1 个答案: