[BootStrap] Positionner des éléments avec FLEX et la classe row

Version imprimable

4 pièce(s) jointe(s)

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:

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:

Pièce jointe 611273

é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 ):

Pièce jointe 611274

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é.

Pièce jointe 611275

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

Pièce jointe 611276

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.

05/01/2022, 13h36
Sparky95

Bonjour,
Pourrais-je voir ton code de la balise html jusqu'à ta balise fermante du header?
Merci

Je suis sur symfony... voici le code source navigateur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html>
   <html> 
      <head>
         <meta charset="UTF-8">
         <title>Welcome!</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>
 ⚫ </text></svg>">
         <link rel="stylesheet" href="/build/vendors-node_modules_react-dom_index_js-node_modules_fortawesome_fontawesome-free_css_all_css.css"><link rel="stylesheet" href="/build/app.css">
         <script src="/build/runtime.js" defer></script><script src="/build/vendors-node_modules_react-dom_index_js-node_modules_fortawesome_fontawesome-free_css_all_css.js" defer></script><script src="/build/app.js" defer></script> 
     </head>
   <body> 
      <header>
         <div class="container-fluid">
         <div class="row justify-content-between align-items-center">
         <img class="col col-sm-2 my-1 bear" src="/images/bear_hello.jpg" alt="bear say welcome"> <h1 class="col text-uppercase text-center">adm</h1>
         <div class="col cta">
             <a class="btn btn-info btn-sm" href="/logout" >Deconnexion</a>
            <a class="col btn btn-info btn-sm" href="/user" >Utilisateurs</a>
       </div>
<div class="container-fluid">
<div id="sfwdt73f404" class="sf-toolbar sf-display-none" role="region" aria-label="Symfony Web Debug Toolbar"> </body>
</html>
</div> </div>
</header> </div>
<!-- START of Symfony Web Debug Toolbar --><div id="sfMiniToolbar-73f404" class="sf-minitoolbar" data-no-turbolink>
<button type="button" title="Show Symfony toolbar" id="sfToolbarMiniToggler-73f404" accesskey="D" aria-expanded="false" aria-controls="sfToolbarMainContent-73f404">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24

Le deuxième container-fluid est probablement la barre de profiler de Symfony !
Voilà, voilà...le problème serait en dehors du bloc header ?

étant donné que tu cherches la réponse via les flex,
Dis moi si c'est cela que tu cherches à faire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
    <header class="container-fluid">
        <div class="d-flex justify-content-between">
            <div class="container-avatar">
                <img src="https://files-cdn.sharenator.com/tumblr_m6mawvG8xA1r257blo3_1280-Bear-says-hi-s533x800-337094.jpg" class="rounded" width="100px">
            </div>
            <div class="container-title align-self-center">
                Hello World!
            </div>
            <div class="container-button d-flex flex-column align-self-center">
                <button class="btn btn-primary">Button 1</button>
                <button class="btn btn-primary">Button 2</button>
            </div>
        </div>
    </header>
</body>
</html>