0
votes

Comment centrer Aligner un bouton à l'aide de bootstrap?

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <button type="button" class="btn btn-outline-primary">Gallary</button>
    </div>
  </div>
</div>

html css bootstrap-4 button

1 commentaires

S'il vous plaît ajouter votre code ici.

3 Réponses :

2
votes

in bootstrap 4 Vous devez utiliser la classe de centre textuel pour aligner les blocs en ligne.

Remarque: Text-Align: Centre; Défini dans une classe personnalisée que vous appliquez à votre élément parent fonctionnera quelle que soit la version de bootstrap que vous utilisez. Et c'est exactement ce que .Text-Center s'applique. P>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">    
<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

0 commentaires

0
votes

Comme décrit dans l'officiel bootstrap docs strong> , vous pouvez simplement ajouter le nom de la classe Text-Center Code> à une liste de classes parent pour horizontalement Centre à horizontalement Eléments de texte Enfants à l'aide de Texte-Align: Centre Code>.

Vérifiez et exécutez l'extrait de code suivant fort> pour un exemple pratique d'utilisation du nom de la classe code> Text-Center: P>

P>



<!-- HTML -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-4 col-md-offset-4 text-center">
        <button type="button" class="btn btn-outline-primary"><a href="#linkToYourOtherPage">Gallary</a></button>
    </div>

  </div>
</div>

9 commentaires

Cela positionne parfaitement le bouton pour moi. Mais le bouton ne semble pas fonctionner dans Google Chrome. Pas de redirection, de navigation ou de curseur. Cela fonctionne lors de l'exécution de l'extrait de code.

Hmm .... c'est bizarre. Avez-vous besoin du bouton pour vous rediriger vers un lien?

J'en ai juste besoin comme un bouton pour m'emmener à la page suivante.

Ensuite, vous devez nier une balise d'ancrage à l'intérieur du bouton. Permettez-moi de mettre à jour la réponse.

Vérifiez l'extrait de code mis à jour.

C'est toujours pareil. Bouton ne réagit pas au curseur.

Pouvez-vous poster le code exact dans jsfiddle.net et me donner le lien. Je vérifierai.

jsfiddle.net/tjsw7r2p/#&togetetherjs=9fsltnnhms

Ce code s'exécute parfaitement dans Jsfiddle et Code Snippet mais pas dans Google Chrome. Chrome, le bouton ne fonctionne pas.

0
votes

Il y a déjà une classe "centre textuel" avec la propriété de Text-Align: Centre à Bootstrap. Vous devez utiliser cela dans l'élément parent afin de centrer les éléments enfants d'alignement.

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
      <button class="btn btn-default">Gallery</button>
    </div>
  </div>
</div>

0 commentaires