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

**Ushuango** · 05/01/2022, 13h13

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:

Nom : desktop.png
Affichages : 157
Taille : 30,3 Ko

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

Nom : mobile.png
Affichages : 159
Taille : 67,8 Ko

Nom : mobile.png
Affichages : 159
Taille : 67,8 Ko

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

Nom : desk-flex.png
Affichages : 160
Taille : 31,1 Ko

Nom : desk-flex.png
Affichages : 160
Taille : 31,1 Ko

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

Nom : desk-row.png
Affichages : 152
Taille : 35,9 Ko

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.

**Sparky95** · 05/01/2022, 14h36

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

**Ushuango** · 05/01/2022, 15h02

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

Code html :

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

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 ?

**Sparky95** · 05/01/2022, 18h13

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

Code html :

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

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>

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

Positionnement en CSS avec flexbox

Vue hybride

Discussions similaires

Partager

Partager