Discussion :

[Ushuango]

Bonjour,

je souhaiterais faire un header simple, mais je deux liens cta me gênent car je n'arrive pas à les positionner comme je veux.
voici le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<header>
    <div class="container-fluid">
        <div class="row justify-content-between align-items-center">
            <img class="col col-sm-2 my-1 bear" src="{{asset('images/bear_hello.jpg')}}" alt="bear say welcome">
            <h1 class="col text-uppercase text-center">adm</h1>
            <div class="col cta">
                 <a class="col btn btn-info btn-sm" href="#" >Utilisateurs</a>
                 <a class="btn btn-info btn-sm" href="#" >Connexion</a>
            </div>
        </div>
    </div>
</header>

le résultat:



évidemment, j'aurai voulu que les boutons soient complètement à droite...
Avec la même marge que l'image ( la marge est automatique pour les images en bootstrap, si je ne me trompe pas )

Et en mode portable, j'ai presque ce que je souhaite ( l'un sous l'autre ):



Il y a la marge, je peux également gérer les espaces autour des boutons, mais j'aurai voulu qu'ils soient de même taille

Si je mets un flex: 0 pour la <div class="col cta"> alors les boutons sont à droite, mais l'un sous l'autre.
Le mode portable reste inchangé.



J'ai aussi tenté <div class="row col cta"> toujours avec flex: 0



Plus de marge , mais les boutons sont de même taille ( mais toujours l'un sous l'autre )
Et le mode portable est plus gérable ( je conserve la même taille pour les boutons ), mais pas de marge...

Je ne sais plus comment faire. Et surtout, comment m'y prendre...
J'imagine que c'est un problème classique, mais je ne dois pas avoir la bonne méthode !

Si quelqu'un peut me débloquer, merci d'avance,

Laurent.