Bootstrap footer rotate issue

Я создаю мобильное приложение, используя HTML/CSS/JS с Bootstrap и PhoneGap Build.Bootstrap footer rotate issue

В моем приложении у меня есть нижний колонтитул на моих страницах с 3 кнопками навигации. Проблема в том, что когда я поворачиваю свое устройство из портрета в альбомное, кнопки не изменяются, чтобы получить полную ширину, как и предполагалось. Однако, если я нажимаю одну из кнопок навигации после поворота, новая загружаемая страница показывает кнопки на полной ширине. Поворачиваясь снова к портрету, теперь есть кнопки, занимающие слишком много места.

Я использую <div class="btn-group btn-group-justified">, как и documentation.

Моего колонтитула HTML выглядит следующим образом:

<nav id="footer" class="navbar-fixed-bottom col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" role="navigation" style="padding: 0 0;"> 
    <div id="footerGroup" class="btn-group btn-group-justified"> 
     <a type="button" class="btn btn-default active" href="#"><span class="glyphicon glyphicon-home"></span> Home</a> 
     <a type="button" class="btn btn-default" href="fundHistoryPage.html"><span class="glyphicon glyphicon-align-justify"></span> History</a> 
     <a type="button" class="btn btn-default" href="calculatorPage.html"><span class="glyphicon glyphicon-usd"></span> Calc</a> 
    </div> 
</nav>

Я также попытался установить обработчик изменение размера событий для удаления «БТН-группа выравнивания» класса и повторно добавить его, но безрезультатно.

$(window).resize(function(){ 
    $("#footerGroup").removeClass('btn-group-justified'); 
    $("#footerGroup").addClass('btn-group-justified'); 
});

Любой совет будет оценен по достоинству.

Редактировать: Верхний колонтитул идеально подходит при тестировании в браузере. Просто не на тестовых устройствах.

источник

2013-10-06 Dom

Не уверен, что вам нужно, но прекрасно работает здесь. http://bootply.com/85933 Можете ли вы предоставить ссылки на страницу для тестирования на мобильных устройствах? Трудно узнать проблему с перетаскиванием размера браузера. – Kooki3

Да, извините, забыл упомянуть, что он отлично работает в браузере, а не на самом устройстве. Отредактировал мой вопрос, чтобы отразить это. – Dom

Обычно, когда я меняю ориентацию своего веб-сайта, я должен дважды нажать, чтобы правильно изменить размер на мобильном устройстве. Это не автоматизировано, и пространство останется неизменным, если вы измените ориентацию. Если вы используете код, проблема может возникать из разных значений COL (некоторые из них равны 12, а другие 10, от 1 до 9, что может усложнить изменение размера вашего загрузочного файла в зависимости от ваших медиа-запросов). – Maikeximu

Ненавижу отвечать на свой вопрос, но я собираюсь в любом случае. После того, как играл с ним немного прошлой ночью я закончил тем, используя следующее:

$(window).resize(function(){ 
    $("#footerGroup").removeClass('btn-group-justified'); 
    setTimeout(function(){ 
     $("#footerGroup").addClass('btn-group-justified'); 
    }, 1); 
});

Я обнаружил, что даже задержка всего 1 миллисекунду перед добавлением класса обратно достаточно, чтобы получить его, чтобы изменить размер правильно. Очень странно. Открыт новый выпуск на репозитории Bootstrap here.

источник

2013-10-08 11:08:16 Dom

отличное решение – harmonickey

<nav id="footer" class="navbar-fixed-bottom col-sm-12 col-sm-8 col-sm-offset-2 col-sm-6 col-sm-offset-3 col-sm-4 col-sm-offset-4" role="navigation" style="padding: 0 0;">

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

источник

2015-04-21 07:29:39

ответ

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