Foundation 6交換機不工作？

在以下非常基本的示例中，交換機的工作原理正確。如果我僅將foundation.css版本從5.5.2更改爲6.0.5，則切換樣式會丟失。爲什麼交換機不能在Foundation 6.0中工作？再次，只需將樣式表更改爲「https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/css/foundation.css」即可停止工作。Foundation 6交換機不工作？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Foundation Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/js/foundation.min.js"></script></head> 
<body> 

<div style="padding:20px;"> 
    <div class="switch large"> 
    <input id="mySwitch1" type="checkbox"> 
    <label for="mySwitch1"></label> 
    </div> 
</div> 

</body> 
</html>

來源

2015-12-30 Ken Williams

Foundation在6.0版本中稍微改變了它的命名方案，因此您需要更新您的HTML以匹配它。看到這裏的文檔：

http://foundation.zurb.com/sites/docs/switch.html

<div class="switch large"> 
     <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch"> 
     <label class="switch-paddle" for="largeSwitch"> 
      <span class="show-for-sr">Show Large Elephants</span> 
     </label> 
    </div>

來源

2015-12-30 20:32:40 Patrick

感謝，這是它。我到處搜索。 –

沒有人知道如何簡單地使開關更寬？ –

你需要重寫類.switch-paddle，並設置你想要的任何寬度，而且你可能想要改變輸入：checked〜.switch-paddle :: after（這是實際的開關）要移動達到所需的寬度。 – Patrick

Foundation 6交換機不工作？

回答

相關問題