[BOOTSTRAP] Mauvais alignement vertical d'éléments

Mauvais alignement vertical d'éléments dans navbar

Sujet résolu

9 août 2017 à 16:04:48

Bonjour à tous

J'ai suivi le cours sur bootstrap d'openclassroom et je me lance dans des test pour mon site web ... et déjà je bloque à la navbar :-°

Voici une image de la navbar :

Navbar

Comme vous pouvez le voir il y a deux ligne dans la navbar, la première qui contient les deux liens Link, le dropdown et le formulaire de connexion, une seconde en dessous avec le test d'éligibilité et le dernier bouton rouge.

Comme vous pouvez le constater, les éléments des deux lignes ne sont pas alignés (bouton Connexion avec bouton Nos offres par exemple) et ça m'embêter parce que je pense pourtant avoir bien mis en place la grille :euh:

Lorsqu'avec Firebug je regarde la mise en forme de ma grille on peut meme voir que malgré que le bouton Nos offre se trouve bien dans la ligne .. il dépasse de la ligne ! (Et je ne met pas plus de 12 col par ligne ..) :

ça dépasse !

je vous donne mon code html :

<body>
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="row">
        <div class="collapse navbar-collapse">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- <div class="col-md-12"> -->
              <div class="row">
                <div class="col-md-6">
                  <ul class="nav nav-justified ">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="col-md-6">
                  <form class="navbar-form navbar-right inline-form" role="form">
                    <div class="form-group">
                      <input type="search" class="input-sm form-control" placeholder="Identifiant">
                      <input type="search" class="input-sm form-control" placeholder="Mot de passe">
                      <button type="submit" class="btn btn-primary  btn-sm"><span class="glyphicon glyphicon-ok-circle"></span> Connexion</button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="row">
                <div class="col-md-5">
                  <form class="navbar-form navbar-left inline-form" role="form">
                    <div class="form-group">
                      <input type="search" class="input-sm form-control" placeholder="Code postal">
                      <button type="submit" class="btn btn-primary  btn-sm"><span class="glyphicon glyphicon-map-marker"></span> Testez votre éligibilité !</button>
                    </div>
                  </form>
                </div>
                <div class="col-md-offset-5 col-md-2">
                  <button type="submit" class="btn btn-danger btn-sm  navbar-right"><span class="glyphicon glyphicon-map-marker"></span> Nos offres</button>
                </div>
              </div>
        <!--    </div> -->
          </div><!-- /.navbar-collapse -->
        </div>
      </div>
    </div>
  </nav>
  <script src="js/jquery.min.js"></script>
  <script src="dist/js/bootstrap.min.js"></script>
</body>

Pour le css j'utilise celui fourni de bootstrap, non modifié pour le moment (enfin sauf pour le menu hamburger mais on s'en fou la )

je précise aussi que je suis newbi dans le domaine, il y a forcément quelque chose que je fais mal mais je ne sais quoi .. >_<

Peut être au niveau du css mais je ne m'y connais pas assez ..

Auriez vous une solution pour que tout rentre dans le cadre ?

Cdt !

Hello World ! On en aura jamais fini d'apprendre !

Golden Panda

9 août 2017 à 16:13:00

Salut,

Tu doit faire un reset de css, par défaut toute pagez html à une mise en forme particulière pour éviter que ca soit tout moche

Voilà pour toi: https://www.alsacreations.com/astuce/lire/36-reset-css.html

Mecadie

9 août 2017 à 16:14:07

Petit up, je me rend compte que le bouton Nos offre marche sur le margin de la ligne

.row {
  margin-right: -50px;
  margin-left: -50px;
}

Mais je sais toujours pas comment régler ça

Salut @Golden Panda, je vais regarder ton lien et voir si ça règle mon soucis, merci

EDIT ::

Ok j'ai compris le principe de normalize.css, mais comment je le fais cohabiter avec la feuille de style de bootstrap ? je copie colle normalize.css dans bootstrap.css ? ou j'inclue les deux fichiers css ?

Cdt

EDIT 2 ::

Le fichier normalize.css est installé mais ne règle pas le problème.

voici une autre image :

Ici on peut voir que le bouton Nos offres dépasse des deux colonnes qui lui sont attribuées (le bouton mord sur le bord violet a droite) alors qu'il devrait etre aligné avec le bouton connexion juste au dessus.

on le voit mieux ici, le bouton Nos offre ne respecte pas une des marges :

si quelqu'un a la solution

Cdt

EDIT RESOLUTION :

J'ai viré le navbar-right et ajouté un pull-right a la place dans les class du bouton ;

                  <button type="submit" class="btn btn-danger btn-sm inline-form pull-right"><span class="glyphicon glyphicon-map-marker"></span> Nos offres</button>

-
Edité par Mecadie 9 août 2017 à 17:07:54

Hello World ! On en aura jamais fini d'apprendre !