web-dev-qa-db-fra.com

bootstrap 4 boutons d'alignement au centre

je suis un peu coincé sur la façon de centrer un groupe de boutons:

<section>
  <div class="d-inline mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

J'ai essayé d'y ajouter d-inline et mx-auto mais cela ne fonctionne pas. Je ne connais pas très bien la bibliothèque, alors quelqu'un pourrait-il m'indiquer la bonne direction?

cssbootstrap-4
5
Strahinja Ajvaz

Il suffit d'utiliser margin:auto son travail avec bootstrap 4

.center{margin:auto;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>
.__ ou vous pouvez utiliser mx-auto de cette façon .. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

6
Znaneswar

ajoutez les 2 classes mx-auto d-block au bouton

<button class="btn btn-primary mx-auto d-block">My Button</button>

cela a fonctionné pour moi quand le bouton était dans un div de corps de carte.

2
Sylvia

Par défaut, bootstrap donne la classe text-center. S'il vous plaît ajouter ceci. Extra css ou la classe n'a pas eu besoin.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="text-center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

1
ankita patel

Insérer la classe center:

<div class="d-inline mx-auto center">

Et:

 .d-inline.mx-auto.center {
    text-align: center!important;
    display:block!important;
}


.d-inline.mx-auto.center {
    text-align:center!important;
    display:block!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<section>
  <div class="d-inline mx-auto center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

1
Ehsan

Une autre façon de l’essayer également, à l’élément parent text-align: center Exemple:

.center { text-align: center; }

ESSAYEZ CE CSS 

<section>
    <div class="center">
        <a class="btn btn-outline-primary" href="#">Home</a>
        <a class="btn btn-outline-primary" href="#">Traffic</a>
        <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
        <a class="btn btn-outline-primary" href="#">Alert Logging</a>
        <a class="btn btn-outline-primary" href="#">Diameter Server</a>
        <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
     </div>
</section>
0
Md. Abu Sayed

Un moyen simple de faire cela: Ajoutez simplement: style="margin-left: 45%;"

<section>
  <div class="d-inline mx-auto" style="margin-left: 45%;">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>
0
Maijied Hasan Shuvo