Bootstrap 3 - Comment faire pour afficher correctement les boutons (btn-barre de navigation) dans la barre de navigation s'est effondré?

J'ai fait un pied de page qui contient 3 boutons (btn-navbar) en utilisant le code HTML suivant. Lorsque la barre de navigation est effondré je peux bascule correctement, mais les boutons sont affichés tous dans la même ligne, au lieu de l'un sur l'autre, comme il le fait avec <li> éléments.

  <!-- Fixed navbar bottom -->
  <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">

      <div class="navbar-collapse collapse" id="navbar-footer">

        <ul class="nav navbar-nav navbar-right">

          <button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button>
          <button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
          <button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>

        </ul>

      </div><!--/.nav-collapse -->

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>

    </div>
  </div>

Il montre comme cela...

Et je voudrais que ce spectacle comme celui-ci...

Merci d'avance.

Le texte et les icônes sont très différents les boutons ou est-ce juste une interprétation?
Est-il une raison pour laquelle vous n'avez pas mis les boutons à l'intérieur <li>s? La seule autorisée du contenu d'un <ul> est zéro ou plus <li> éléments, éventuellement mélangé avec de l' <ol> <ul> les éléments. developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

OriginalL'auteur nacho_dh | 2014-06-11

Travail De Violon

Il vous manque des li au sein de l'ul. HTML problème de marquage:

 <ul class="nav navbar-nav navbar-right">
   <li><button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button></li>
   <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
   <li><button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button></li>
 </ul>

Vous souhaitez mettre à jour le lien. Il ne fonctionne plus.
Il fonctionne pour moi... d'ailleurs j'ai posté le code nécessaire ainsi...

OriginalL'auteur Aamir Shahzad

1

Envelopper chacun de vos boutons dans une balise li, comme ceci:
```
<li><button type="button" class="btn btn-warning navbar-btn">
<span class="glyphicon glyphicon-check"></span> Verificar</button></li>
```
Chaque ligne à l'intérieur d'une balise ul doit être enveloppé dans li balises à se comporter comme prévu.

OriginalL'auteur Doa

Votre code HTML n'est pas correct. Un button élément qui ne peut pas imbriquée à l'intérieur d'un ul élément.

Vous devez emballer votre élément de bouton dans LI élément.

Essayer ce code HTML:

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container-fluid">
     <div class="navbar-collapse collapse" id="navbar-footer">
        <ul class="nav navbar-nav navbar-right">
          <li class = "active"><button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button></li>
          <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
          <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
          <li><button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>
       </ul>
    </div>

   <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
   </div>

  </div>
</div>

Travail De Violon

OriginalL'auteur Ishan Jain

Vous devez vous connecter pour publier un commentaire.