27858 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai fait le "menu" suivant par ordre alphabétique qui fonctionne très bien sur PC mais sur téléphone la barre sort de l'écran.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group btn-group-lg mr-2" role="group" aria-label="First group" style="width:100%">
        <a href="javascript:visibilite('A');" class="btn btn-secondary btn-lg" role="button">A</a>
        <a href="javascript:visibilite('B');" class="btn btn-secondary btn-lg" role="button">B</a>
        <a href="javascript:visibilite('C');" class="btn btn-secondary btn-lg" role="button">C</a>
        <a href="javascript:visibilite('D');" class="btn btn-secondary btn-lg" role="button">D</a>
        <a href="javascript:visibilite('E');" class="btn btn-secondary btn-lg" role="button">E</a>
        <a href="javascript:visibilite('F');" class="btn btn-secondary btn-lg" role="button">F</a>
        <a href="javascript:visibilite('G');" class="btn btn-secondary btn-lg" role="button">G</a>
        <a href="javascript:visibilite('H');" class="btn btn-secondary btn-lg" role="button">H</a>
        <a href="javascript:visibilite('I');" class="btn btn-secondary btn-lg" role="button">I</a>
        <a href="javascript:visibilite('J');" class="btn btn-secondary btn-lg" role="button">J</a>
        <a href="javascript:visibilite('K');" class="btn btn-secondary btn-lg" role="button">K</a>
        <a href="javascript:visibilite('L');" class="btn btn-secondary btn-lg" role="button">L</a>
        <a href="javascript:visibilite('M');" class="btn btn-secondary btn-lg" role="button">M</a>
        <a href="javascript:visibilite('N');" class="btn btn-secondary btn-lg" role="button">N</a>
        <a href="javascript:visibilite('O');" class="btn btn-secondary btn-lg" role="button">O</a>
        <a href="javascript:visibilite('P');" class="btn btn-secondary btn-lg" role="button">P</a>
        <a href="javascript:visibilite('Q');" class="btn btn-secondary btn-lg" role="button">Q</a>
        <a href="javascript:visibilite('R');" class="btn btn-secondary btn-lg" role="button">R</a>
        <a href="javascript:visibilite('S');" class="btn btn-secondary btn-lg" role="button">S</a>
        <a href="javascript:visibilite('T');" class="btn btn-secondary btn-lg" role="button">T</a>
        <a href="javascript:visibilite('U');" class="btn btn-secondary btn-lg" role="button">U</a>
        <a href="javascript:visibilite('V');" class="btn btn-secondary btn-lg" role="button">V</a>
        <a href="javascript:visibilite('W');" class="btn btn-secondary btn-lg" role="button">W</a>
        <a href="javascript:visibilite('X');" class="btn btn-secondary btn-lg" role="button">X</a>
        <a href="javascript:visibilite('Y');" class="btn btn-secondary btn-lg" role="button">Y</a>
        <a href="javascript:visibilite('Z');" class="btn btn-secondary btn-lg" role="button">Z</a>
    </div>
</div>


Je pense que le problème vient de mon style="width:100%" mais j'en ai besoin aussi de lui donc je sèche.

Dans l'idéal sur téléphone il faudrait que ça se mette à la ligne dès que la largeur de l'écran est atteinte, sans changer le 100% pour la version PC mais je vois pas comment faire.

Si quelqu'un pouvait éclairer ma lanterne, ça serait cool Smiley smile