Коммутаторы Foundation 6 не работают?

В следующем очень базовом примере коммутатор работает и оформлен правильно. Если я просто изменил версию base.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

Фонд немного изменил схему именования версии 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

ответ

Смежные вопросы