Создайте панель навигации с фиксированным основанием в начальной загрузке, которая перемещает содержимое вверх при переключении

У меня есть два navbar на моем сайте, один в шапке и другой в нижнем колонтитуле

Часть заголовка работает нормально, но я хочу, чтобы нижний колонтитул был похож на панель навигации, но, когда я перехожу в мобильное представление (меньший видовой экран), появляется кнопка переключения (функция начальной загрузки по умолчанию), но при нажатии на этот переключатель он скользит вниз и содержимое отображается под панелью навигации, а не вверх, так что, кто-нибудь может мне помочь в этом?

Я не знаю, как включить Bootstrap в Fiddle, поэтому непосредственно публикую свой код нижнего колонтитула. это включает, файлы начальной загрузки и файлы Fontawesome в моем непосредственно.

ПолучилBootply ссылка:http://bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
 Stephane Lallemagne03 янв. 2014 г., 15:09
У меня работает с bootstrap3 под FF 26.0 и Chrome 31.0.x. Какова ваша целевая среда (версии для начальной загрузки и браузеры)?
 Deepak Yadav06 янв. 2014 г., 05:59
Бутстрап 3! Я использую его в последних браузерах, кроме IE :(

Ответы на вопрос(3)

Добавьте еще один CSS:

@media screen and (max-width: 768px) {
  footer .navbar-collapse {
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: #303030;
  }
}

http://www.bootply.com/4b6cSUMTzg

Решение Вопроса

просто изменив порядок. Вместо того, чтобы ставить заголовок navbar перед элементами свертывания, ставьте его после. Таким образом, вы не полагаетесь на позиционирование и не получаете вспышку / скачок, пока строка заголовка и кнопка расширения перемещаются вниз.

Вот демо:http://www.bootply.com/117444

Все, что я сделал, это переместил элемент div свертывания перед элементом div "header" с помощью кнопки.

 Daniel Springer04 дек. 2016 г., 19:21
Пожалуйста, оставьте свой код здесь тоже.
 Daniel Springer04 дек. 2016 г., 16:54
Почему при попытке просмотреть bootply ничего не появляется? (не первый раз, когда я не вижу bootply кстати)
 Deepak Yadav04 июн. 2014 г., 15:09
Ага !! Даже я сделал то же самое! и это сработало для меня ..
 Daniel Springer29 дек. 2016 г., 19:50
Я ничего не вижу на самом деле .. Только код. Но в разделе результатов ничего ..
 Tanner Lindsay28 дек. 2016 г., 21:13
@alldani Bootply работает для меня, но проблема появляется только в мобильном телефоне, потому что это когда колонтитул разрушается. Вы должны просто увидеть нижний колонтитул внизу. Сначала я тоже это пропустил.

вы хотите, чтобы меню переключения отображалось выше, а не под кнопкой переключения. Для этого вам нужно установить абсолютное положение меню колласпе.

footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}

Bootply Demo:http://bootply.com/103653

 Deepak Yadav06 янв. 2014 г., 05:57
это сработало для меня! но Toggler сначала скользит вверх с открытой навигацией, а затем падает там, где я хочу быть исправленным.

Ваш ответ на вопрос