Ссылки отключены в мобильной версии сайта

Question

Я использую Bootstrap в качестве шаблона для этого сайта, www.ifgedmonton.org Все работает отлично на настольной версии, но в мобильной версии все ссылки, кроме навигации, не работают. Я запустил код через W3C Validator и исправил возможных кандидатов, вызвавших эту проблему. Я также рассмотрел другие предложения по этому поводу (here, here, here и here), но они не работают для меня. Чтобы воспроизвести, пожалуйста, откройте веб-сайт на мобильном устройстве или сделайте окно своего браузера достаточно маленьким, чтобы оно отображало мобильную версию. На скриншоте ниже показаны ссылки, на которые я ссылаюсь.

Answer 1

Первое решение

Изменение Это

<div class="col-sm-3" id="sidebar" role="navigation"></div> 

Для этого

<div class="col-xs-12 col-sm-3" id="sidebar" role="navigation"></div> 

Это поставит боковую панель в нижней

Или

Изменить его к этому

<div class="col-sm-3 hidden-xs" id="sidebar" role="navigation"></div> 

Это скроет боковая панель

Answer 2

боковой панели перекрывает контент из-за этого

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:left; }

на медиа-запросов для мобильного использования

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:none; }

и вы будете иметь возможность выбрать ур текст и ссылки снова

Answer 3

Ваша задача заключается в следующем:

<script src="http://www.ifgedmonton.org/assets/libs/boostrap/js/bootstrap.min.js"></script> 

не тянет все ссылки слишком самозагрузки CSS и JS файлов файл

проверки.

Answer 4

По внешнему виду это не мобильная версия. Это просто хлюпает. Правая колонка, когда она опускается ниже, разбивает ссылки. Я бы посмотрел, как создать настоящий мобильный шаблон. Прохождение игры: http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/

Answer 5

Вы боковая панель, которая сидит сверху основного содержимого. Вы можете исправить это с помощью правильного css или добавить разделительный div между ними.

<style> 
    .clear { clear: both; } 
</style> 

<div class="clear"></div>