Créer un Fixe vers le bas barre de navigation dans le bootstrap que les diapositives de contenu vers le haut lorsqu'elle est activée,

Je vais avoir deux navbars sur mon site web, un en-tête et de Pied de page

Partie en-tête fonctionne très bien, mais ce que je veux, c'est que le pied de page doit être similaire à la barre de navigation, mais, quand je vais dans affichage mobile (petite fenêtre) il y a un bouton à bascule (par défaut bootstrap) mais quand on clique sur la bascule, il glisse vers le bas, et le contenu est affiché en dessous de la barre de navigation, en dépit vers le haut, donc, quelqu'un peut-il m'aider?

Je ne sais pas, comment inclure de Bootstrap dans Violon, de sorte directement de poster mon pied de page de code. elle comprend, des fichiers d'amorçage et de Fontawesome fichiers dans mon directement.

Ai Bootply lien:
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>

Fonctionne pour moi avec bootstrap3 sous FF 26.0 & Chrome 31.0.x. Qu'est-ce que votre environnement cible (bootstrap & versions des navigateurs) ?
Bootstrap 3 ! Je m en l'exécutant sur les navigateurs les plus récents, sauf pour IE 🙁

OriginalL'auteur Deepak Yadav | 2014-01-03

19

J'ai pu obtenir que cela fonctionne simplement de changer l'ordre. Au lieu de mettre votre barre de navigation-en-tête de votre effondrement éléments, mis après. De cette façon, vous n'êtes pas reposer sur de positionnement et de ne pas avoir un flash/jump tandis que la barre d'en-tête et d'élargir le bouton déplacer vers le bas.

Voici une démo: http://www.bootply.com/117444

Je n'ai fait que déplacer l'effondrement des éléments div en face de la "en-tête" div " avec le bouton

Yup !! Même j'ai fait de même..! et cela a fonctionné pour moi..
Comment se fait-pas de résultats s'affiche lorsque j'essaie de visualisation bootply? (pas la première fois que je ne peux pas voir bootply btw)
Merci de poster votre code ici, trop.
Le bootply est de travailler pour moi, mais le problème n'apparaît que dans le mobile parce que c'est quand le pied de page s'effondre. Vous devez juste voir un pied de page en bas. Je l'ai raté au premier abord.
Je ne vois rien en fait.. que du code. Mais dans le résultat de la section, rien..

OriginalL'auteur Tanner Lindsay
1

Si je comprends bien votre question, vous voulez la bascule de menu pour l'affichage ci-dessus au lieu de sous le bouton à bascule. Pour ce faire, vous aurez besoin de la position absolue de l'collaspe menu..
```
footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}
```
Bootply Démo: http://bootply.com/103653

il a travaillé pour moi ! mais l'activation / désactivation d'premières diapositives avec l'ouverture de la nav, puis tombe à l'endroit où je veux être fixe.

OriginalL'auteur Zim

Fixer Skelly solution.

D'en ajouter un CSS:

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

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

OriginalL'auteur Akairis

Vous devez vous connecter pour publier un commentaire.