Donc, fondamentalement, sur la version de bureau, les 4 boutons doivent apparaître en groupes de 2 de manière 2x2. Le problème est que sur mobile, chacun doit avoir chaque ligne individuelle. J'utilise bootstrap pour la manipulation des lignes / colonnes et React pour le front-end. Im travaillant généralement sur le back-end, donc je ne sais rien du côté CSS html.

<div class="flex-row h-75">
            <div class="d-flex col-sm no-margin">
                <div class="d-flex justify-content-end col-sm p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/profile">
                            <img src={Profile} alt="profile"/>
                        </Link>
                    </div>
                </div>
                <div class="d-flex justify-content-start col-sm p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/logout">
                            <img src={Logout} alt="logout"/>
                        </Link>
                    </div>
                </div>
            </div>
            <div class="d-flex col-sm no-margin">
                <div class="d-flex justify-content-end col-sm-6 p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/products">
                            <img src={Products} alt="products"/>
                        </Link>
                    </div>
                </div>
                <div class="d-flex justify-content-start col-sm-6 p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/about">
                            <img src={About} alt="about"/>
                        </Link>
                    </div>
                </div>
            </div>
        </div>
0
Mihnea Radu 6 avril 2020 à 23:22

3 réponses

Meilleure réponse

Je l'ai découvert par moi-même, ce que Trisha a dit était à moitié droit. J'ai changé la classe d-flex col-sm en une classe de lignes, puis j'ai changé les d-flex-es en col-lg-6 afin qu'elle ne s'affiche dans les colonnes que sur de grands écrans. Cela a fonctionné.

0
Mihnea Radu 7 avril 2020 à 10:02

Jetez un œil à cette page: https://getbootstrap.com/docs/4.0/layout/ grille / Vous devez utiliser la classe col-12 pour chaque élément

1
Trisha 6 avril 2020 à 20:31

Vous pouvez dupliquer et en créer un pour le bureau avec la classe 'd-none d-md-block' et pour le petit écran, vous pouvez utiliser class = "d-block d-md-none"

0
aimen aimen 6 avril 2020 à 21:20