Comment définir la même marge pour les boutons dans la rangée par bootstrap

Question

comme le dit le titre, c'est mon problème. Je veux quelque chose comme la marge: auto.

ceci est mon fichier html

<div class="container-fluid clenovia-button"> 
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Tréneri</button></div> 
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Muži</button></div> 
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Juniori</button></div> 
    <div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Dorastenci</button></div> 
    <div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Starší žiaci</button></div> 
    <div class="col-xs-2 col-md-1"> <button type="button" class="btn btn-danger">Mladší žiaci</button></div> 
    <div class="col-xs-2 col-md-1"><button type="button" class="btn btn-danger">Prípravka</button></div> 
</div> 

c'est mon fichier css

.clenovia-button{ 
    display: inline-block; 
    margin: auto; 
} 
.clenovia-button button{ 
    padding: 3px; 
} 

Answer 1

.btn-primary-spacing 
 
{ 
 
margin-right: 3px; 
 
margin-bottom: 3px !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="col-sm- col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
Tréneri 
 
</button> 
 
</div> 
 

 
<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
    Muži 
 
</button> 
 
</div> 
 

 
<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
    Juniori 
 
</button> 
 
</div> 
 

 
<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
    Dorastenci 
 
</button> 
 
</div> 
 

 
<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
Starší žiaci 
 
</button> 
 
</div> 
 

 
<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
    Mladší žiaci 
 
</button> 
 
</div> 
 

 
<div class="col-sm-2 col-xs-2 col-md-2 col-lg-2"> 
 
<button type="button" class="btn btn-danger btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
 
Prípravka 
 
</button> 
 
</div>