Bootstrap alignement du bouton et de la pagination

Je suis en utilisant Twitter Bootstrap 3 pour construire mon nouveau site web. Je veux placer un bouton sur le côté gauche et une pagination sur le côté droit.

<button type="button" class="btn btn-default pull-left">Default</button>

<ul class="pagination pull-right">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
 </ul>

Mon problème est que je suis incapable d'aligner deux éléments correctement:

http://bootply.com/91723

La pagination a un petit décalage.

Que puis-je faire pour supprimer ce décalage?

source d'informationauteur Marcello90

  1. 9

    Essayez d'ajouter sat:-

    .pagination {
margin: 0px !important;
}
  2. 14

    Envelopper d'une sémantique descriptive de classe autour de votre bouton et la pagination, comme .navigation-bar et de l'utiliser pour cible la marge sur le .pagination:

    .navigation-bar .pagination {
      margin-top: 0;
    }

    http://bootply.com/91736

    Vous ne devriez jamais ignorer un cadre classe directement, car elle s'appliquerait sur l'ensemble de votre base de code. L'alternative est de simplement étendre l' .la pagination de la classe:

    <ul class="pagination no-margin pull-right">
  3. 8

    Je pencherais pour:

    <div class="btn-toolbar" role="toolbar" style="margin: 0;">
      <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
      </div>

      <div class="btn-group pull-right">
                <ul class="pagination" style="margin: 0;">
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>
      </div>
    </div>

    http://www.bootply.com/116457

    si vous remplacez le <ul><li.... avec boutons , vous avez pas besoin d'utiliser style="margin: 0;

    Exemple ici:
    http://getbootstrap.com/components/#btn-groups-toolbar

  4. 2

    Mettre ci-dessous le style de l'élément ul:

    <ul style="margin-top:0;" class="pagination pull-right">
  5. 0

    ajouter cette classe à votre ul et dans votre css:

    .no-top-margin {
  margin-top: 0;
 }

    ou à votre bouton et css:

    .add-top-margin {
    margin-top: 20px;
}

    Aussi je vous recommande de Googler et de la lecture de certains débutant tutoriels sur l'utilisation de ces Outils de développement Chrome ou Firebug pour firefox, surtout si vous allez faire plus de html/développement web dans le futur :-).

  6. 0

    Vous pouvez définir une largeur et l'utilisation des marges vers le centre de la page. Notez également que cette solution fonctionne, vous devez supprimer .pull-right de la ul

    Voici le code HTML:

    <button type="button" class="btn btn-default pull-left">Default</button>

            <ul class="pagination pull-right">
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>

    Voici le CSS:

    .pagination {
  display: block;
  width: 232px;
  margin: 0 auto;
  background: #ccc;
}
  7. -1

    Vous pouvez les mettre dans une table & puis appliquer la marge supérieure.

    <table>
<tr>
    <td>
        <button type="button" class="btn btn-default pull-left">
            Default</button>
    </td>
    <td>
        <ul class="pagination pull-right">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </td>
</tr>

  8. -1
    `<div class="pagination justify-content-center pagination-large" id="pagination-demo">

    `

    justifier-le contenu-le centre de flex votre pag au centre