基礎4：在軌道滑塊中使用行

Question

我正在使用Foundation 4和Orbit滑塊。 我想用它作爲內容滑塊。

是否可以將來自基礎的行放入軌道滑​​塊而不會混淆來自Orbit的邊距？

<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行與行類和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>