Question

我正在使用带有Orbit滑块的Foundation 4。我想将它用作内容滑块。

是否可以将基础行中的行放入轨道滑块而不会弄乱轨道的边距？

<ul data-orbit>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Hallo</h1>
            </div>
        </div>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Doei</h1>
            </div>
        </div>
        <img src="img/slider/1.jpg">        
    </ul>

有3个滑块项目。 2个div与行类和1个全宽图像。这个例子混淆了类行的边距。我想添加边距，因此带有行类的div将在中间对齐。

Answer 1

我不确定我是否理解你的问题，但是如果你想要3张幻灯片（2张大屏幕中间有文字，1张带图片）我觉得这段代码应该有效（但是我没有测试它）：

如果您将.large-centered类添加到<li>标记，它们会自动将文本与中间对齐，而您不必关心css中的边距。

<div class="row">
  <div class="large-12 columns">
    <div class="orbit-container">
      <ul data-orbit="">
        <li class="row">
          <div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div>
        </li>
        <li class="row">
            <div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div>
        </li>
        <li><img src="img/slider/1.jpg" alt=""></li>        
      </ul>
    </div>
  </div>
</div>

基础4：在轨道滑块中使用行

1 个答案: