Formatage de 3 boutons dans le bootstrap (responsive)

Question

Je me demande simplement quel est le meilleur moyen de formater trois boutons pour qu'ils s'affichent correctement sur différentes tailles d'écran. Donc, c'est ce que j'ai fait jusqu'à présent et ça a l'air bien sur un écran de 1200px.

Ce que j'ai fait, c'est que j'ai utilisé les boutons et les ai mis dans les classes span4. Comme si:

<div class="row-fluid"> 
 
    <div class="span4"> 
 
    <a class="header-btn" href="#">Testbutton 1</a> 
 
    </div> 
 
    <div class="span4"> 
 
    <a class="header-btn" href="#"> 
 
     Testbutton 2 
 
    </a> 
 
    </div> 
 
    <div class="span4"> 
 
    <a class="header-btn" href="#">Testbutton 3</a> 
 
    </div> 
 
</div>

Cependant, quand je réduire la taille de l'écran il semble mauvais et les boutons se briser.

Je souhaite que les boutons s'affichent l'un sous l'autre lorsque la taille de l'écran devient trop petite.

Je pourrais modifier la classe span4 à partir de bootstrap mais cela pourrait gâcher avec l'autre mise en page ... Alors devrais-je simplement ajouter une nouvelle classe et rendre tout ce qui répond, ou travailler avec le framework bootstrap?

Veuillez nous aviser. Merci!

Answer 1

Vous semblez l'utiliser correctement pour v2, donc peut-être que le chargement de bootstrap ne se fait pas correctement.

mais je suggère de mettre à jour vers v3 ou v4, vous pouvez en apprendre plus dans les documents. Tous les boutons seront alignés horizontalement l'un avec l'autre mais à mesure que l'écran devient plus petit. les boutons s'ajusteront, puis iront verticalement l'un avec l'autre. en fonction de comment vous l'avez mis en place. Mais cela le rend réactif.

Vous voudrez peut-être quelque chose comme ça, dans le code HTML:

! Pour que tout fonctionne comme il le devrait, lorsque vous cliquez sur le bouton Exécuter l'extrait. Cliquez sur la page complète, puis faites glisser le côté du navigateur de plus en plus petit, et vous verrez les boutons s'ajuster.!

J'espère que cela aide!

.div-container{ 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border-radius: 5px; 
 
} 
 

 
button{ 
 
    margin-left: 45% !important; 
 
}

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

 
<div class='div-container'> 
 
    <div class='row'> 
 
    <div class='col-sm-4'> 
 
     <button class='btn btn-primary'>CLICK</button> 
 
    </div> 
 
    <div class='col-sm-4'> 
 
     <button class='btn btn-primary'>CLICK</button> 
 
    </div> 
 
    <div class='col-sm-4'> 
 
     <button class='btn btn-primary'>CLICK</button> 
 
    </div> 
 
    </div> 
 
</div>