J'utilise Twitter Bootstrap V3.3.7 Cadre pour la désiguration. J'essaie de créer une mise en page comme cette image ci-jointe.
Les couleurs exactes n'ont pas besoin d'être nécessaires mais la mise en page doit être la même avec des flèches, Marqueurs, contenus, etc. Jusqu'à présent, ce que j'ai essayé d'être au-dessous du code:
Le problème est qu'il n'a pas l'air exacte et que ce n'est pas réactif entre les périphériques. Non seulement sur mobile, mais il a l'air mauvais même sur des ordinateurs portables et des ordinateurs de bureau de taille différente. Peut-être que quiconque s'il vous plaît aider à atteindre ce type de mise en page en voie réactif, avec / sans bootstrap Twitter et je suis ouvert à Tout plugin JQuery aussi pour cela, si cela aide ... 
3 Réponses :
Je pense que vous devez utiliser une classe de bootstrap dans votre code pour devenir une réponse réactive
https://getbootstrap.com/docs/4.1/layout/grid/
Vérifiez cela et obtenez une idée
Si vous avez besoin de le rendre réactif, l'utilisation des classes de bootstrap 3.3.4 pour les dispositions de la grille est nécessaire. L'exemple de code que vous affichez, n'utilise aucune classe de bootstrap, autant que je puisse dire.
La première étape consisterait à commencer par une grille complètement basée sur Bootstrap. Puis modifier l'apparence. Donc, les éléments des flèches et ses étiquettes ressemblent à vous déjà fait avec les classes En ce qui concerne le comportement réactif, vous devez définir ce qui devrait se produire sur les smartphones et les comprimés: les blocs apparaissent-ils verticalement avec des flèches qui tournent vers le bas?
Ceci n'est pas clarifié dans votre question. L'approche suggérée avec la grille de bootstrap briserait les éléments verticalement, si c'est ce que vous avez l'intention. .vline - avec les classes de bootstrap.
Pour le plaisir et de mon commentaire En attente de commentaires, je ne serai pas ici les prochains jours.
Que pensez-vous comme un résultat réactif (fluide?) lorsque l'écran n'est pas Assez large ? les empiler avec une flèche sur le dessus ou le bas de chaque boîte ou de côté à droite ou à gauche? Vous avez utilisé beaucoup d'absolu où transformez pourrait aider mieux. Un écran Flex ou grille serait-il une option (à la place flotter de bootstrap3). Est également une option pour couper les flèches ? etc ...;) clarifier votre question :) p> blockQuote>
Voici une approche possible via Flex & Grid et Mediaquerie sans BS3 STROND>. P>
Voir si vous pouvez faire quelque chose en dehors de celui-ci (c'est partiellement une fourchette d'un autre extrait de mienne) em>: p>
l'extrait d'exécution à la page complète, point de rupture définie à 860px de largeur avalable. em>
<ul> <li>Project Commence</li> <li> <div> <h3>Discovery </h3> <p>This slide is 100% editable.<br> Adapt it to your needs and capture your <br> audience's attention</p> </div> <div class="drop-shadow-buffer"></div> </li> <li style="--bg:#374659"> <div class="drop-shadow-buffer"></div> <div> <h3>High Level design </h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> </li> <li style="--bg:#1fa1af"> <div> <h3>Detail design </h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> <div class="drop-shadow-buffer"></div> </li> <li style="--bg:#d03c30"> <div class="drop-shadow-buffer"></div> <div> <h3>Develop </h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> </li> <li> <div> <h3>Testing</h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> <div class="drop-shadow-buffer"></div> </li> <li style="--bg:#374659"> <div class="drop-shadow-buffer"></div> <div> <h3>Training </h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> </li> <li style="--bg:#1fa1af"> <div> <h3>Deploy </h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> <div class="drop-shadow-buffer"></div> </li> <li style="--bg:#d03c30"> <div class="drop-shadow-buffer"></div> <div> <h3>Support</h3> <p>This slide is 100% editable. Adapt it to your needs and capture your audience's attention</p> </div> </li> <li>Project Complete</li> </ul>
Grande solution très bien tentée.
Pourquoi un vote négatif sur la question? Veuillez poster un commentaire avec une raison de vote négatif s'il vous plaît.
Comment avez-vous vu ce rendu sur un écran mobile? Verticalement? Où va le texte explicatif?
Je vois tous les textes explicatifs se chevauchant et / ou d'autres sections.
Le texte explicatif du point 1 et du point 3, par exemple, se chevauchera sur les petits écrans
Qu'attendez-vous comme un résultat réactif (fluide?) lorsque l'écran n'est pas assez large? empilez-les avec une flèche sur le dessus ou le bas de chaque boîte ou de côté à droite ou à gauche? Vous avez utilisé beaucoup d'absolu où la transformation pourrait aider à mieux améliorer. Un écran Flex ou grille serait-il une option (flotter au lieu de bootstrap3). Le pavillon est-il également une option pour couper les flèches? etc ...;) clarifier votre question :)