web-dev-qa-db-fra.com

Alignement Bootstrap du bouton et de la pagination

J'utilise Twitter Bootstrap 3 pour créer 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 ne peux pas aligner correctement les deux éléments:

http://bootply.com/91723

La pagination a un petit décalage.

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

htmlcsstwitter-bootstraptwitter-bootstrap-3
13
Marcello90

Essayez d'ajouter ceci: -

.pagination {
margin: 0px !important;
}
9
Sujata Chanda

Enroulez une classe descriptive sémantique autour de votre bouton et de votre pagination, telle que .navigation-bar et utilisez-la pour cibler la marge sur la .pagination:

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

http://bootply.com/91736

Vous ne devez jamais remplacer directement une classe d'infrastructure, car cela s'appliquerait à l'ensemble de votre base de code. L’alternative consiste simplement à étendre la classe .pagination:

<ul class="pagination no-margin pull-right">
15
Matthew Trow

Je voudrais aller 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.... par des boutons, vous n'avez pas besoin d'utiliser style="margin: 0;

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

8
HenryW

Mettez le style ci-dessous dans l'élément ul:

<ul style="margin-top:0;" class="pagination pull-right">
2
Ricky Stam

Vous pouvez définir une largeur et utiliser des marges pour la centrer sur la page. Notez également que pour que cette solution fonctionne, vous devez supprimer .pull-right de la ul

Voici le 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;
}
0
user2578173

ajoutez cette classe à votre ul et à votre css:

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

ou ceci à votre bouton et css:

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

Aussi, je recommanderais Google et la lecture de quelques tutoriels pour débutants sur l'utilisation de Chrome Developer Tools ou de Firebug pour Firefox, en particulier si vous envisagez de développer davantage de développement HTML/Web à l'avenir :-).

0
Samih