Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Mise en page de grille Bootstrap


VlNCENT
 Partager

Messages recommandés

Bonjour à toutes et tous,

J'aimerais créer une grille avec trois colonnes venant d'un fichier Bootstrap (V:5.0). J'y arrive avec deux mais je coince pour la troisième :

<div class="container"><div class="row">
     	<div class="col-lg-3 order-2 order-md-1">Bla bla bla</div>
	<div class="col-lg-9 order-1 order-md-2">Bli bli bli</div></div></div>

Actuellement :

image_1.thumb.jpg.fd781a77bc6171891ae335538260aeb5.jpg

Ors j'aimerais placer en-dessous de la colonne (lg-9) une autre colonne de même largeur (lg-9) et en même temps à coté de celle de lg3. 

image_2.thumb.jpg.df84e59f8512a52dc9b0d84d0ba6319f.jpg

J'aimerais aussi que sur des écrans petits (GSM) que celle-ci ce place en troisième position (order-md-3).

image_3.jpg.6c7895858e651eed0c8cd844856de6f4.jpg

J'ai tester plusieurs solutions mais je n'y arrive pas.

Bien à vous

Vincent

 

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Dylav,

Je ne pense pas qu'il faut le css, c'est basé sur un système, je suppose, flex box connu. Cependant dans le doute voici le lien https://bootstrapmade.com/demo/Arsha/ du Template gratuit avec lequel lequel je tente de placer c'est trois colonne dans la page "inner-page".

Désoler pour ne pas mieux expliquer de manière précise ma demande, en même temps si quelqu'un connais Bootstrap je crois qu'il comprendra.

bien à toi et belle journée Dylav.

Vincent 

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

Salut Vincent,

C'est par le biais de la feuille de style que l'on compose la mise en page. C'est donc bien là que tu dois exprimer tes spécifications.

En d'autres termes, c'est par le biais des classes container, row, col-lg-3, order-2, order-md-1, col-lg-9, order-1, order-md-2, etc., que tu vas positionner et présenter tes différentes boîtes (blocs <div>) et leur contenu.

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

Si tu ne maîtrises pas l'accès à la feuille de style, je te suggère de contourner la difficulté en englobant tes 2ème et 3ème blocs (n°4 et 5 du schéma ci-dessous) dans un bloc (à créer, n°3 du schéma) identique au 1er bloc (n°2 du schéma).

vap5.jpg

Ce qui donnerait le code HTML ci-dessous.

<div class="container">
  <div class="row">
    <div class="col-lg-3 order-2 order-md-1">Bla blo blu</div>
    <div class="col-lg-3 order-2 order-md-1">
      <div class="col-lg-9 order-1 order-md-2">Bli bli bli</div>
      <div class="col-lg-9 order-1 order-md-2">Bla bla bla</div>
    </div>
  </div>
</div>


Et je pense que les blocs se présenteraient automatiquement comme tu le souhaites sur les petits écrans (type smartphone). À tester…

Tu noteras qu'ici les caractéristiques de présentation (classes) des blocs n°2 et 3 sont identiques. De même, celles des blocs n°4 et 5 le sont également. Mais, si tu as les moyens d'influer sur la feuille de style, rien ne t'empêche de les différencier.

Bloc 1 = classe  row
Blocs 2 et 3 = classes  col-lg-3  order-2  order-md-1
Blocs 4 et 5 = classes  col-lg-9  order-1  order-md-2

Lien vers le commentaire
Partager sur d’autres sites

Merci Dylav,

En effet sa fonctionne pour les grand écran et en même temps pour les petits cela ne vas pas. Le bloc Bla bla bla ce place entre les deux autres bloc et il devrait être tout en bas. Il existe en effet des solutions en faisant flotter un bloc, cependant je n'aime pas trop cette perspective... Je pense qu'il y à moyen d'éviter cela, je continue à chercher.

Si tu as d'autre suggestion n'hésite pas et un tout grand merci pour ton aide. 

Bien à toi Dylav.

 

 

Lien vers le commentaire
Partager sur d’autres sites

Salut Dylav,

Sry pour la réponse tardive. Oui et non je me suis mal exprimé.

Sur grand écran l'ordre est bon CAD : 2 - 4 -5.

Sur petit écran l'ordre devrait être 4- 2 - 5 et avec ton code, l'ordre est toujours de 2 - 4 -5

Actuellement le seul moyen "propre" pour contourner ce problème est de créer un bloc supplémentaire cacher sur grand écran et de le faire apparaitre sur petit écran, celui-ci contenant le même texte du bloc 2 (bla blo blu). Il faut aussi caché le bloc 2 sur petit écran.

Le code donne ceci :

  <div class="container">
  <div class="row">
    <div class="col-lg-3 order-lg-1 order-md-2 d-none d-lg-block">Bla blo blu</div><!-- texte visible uniquement sur grand ecran-->
    <div class="col-lg-9 order-lg-2 order-md-1">
      <div class="col-lg-9 order-1 order-md-2"> Bli bli bli</div>
      <div class="col-lg-9 d-lg-none">Bla blo blu</div> <!-- texte caché (copie du block 2) sur grand écran mais qui apparait sur les écrant plus petit-->
      <div class="col-lg-9 order-1 order-md-2">le Bla bla bla</div>
    </div>
  </div>
</div>

Ca fonctionne et en même temps il doit y avoir moyen de faire plus propre sans devoir doubler le texte du block 2...

Tout est expliqué ici : https://getbootstrap.com/docs/5.0/getting-started/introduction/ dans l'onglet LAYOUT > GRID ou Columns mais je ne trouve pas...

Merci Dylav de ton aide, bien qu'il y à cette solution je laisse le topic comme non résolu pour l'instant qui sait peut-être qu'il y à une solution plus "propre".

Bien à toi

Vincent

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

 Partager

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...