Je construisais un site Web pour un restaurant local et c'est mon premier. J'écris le menu maintenant, mais je ne sais pas comment avoir, par exemple, des débutants sur une moitié de l'écran et du menu principal de l'autre moitié, côte à côte. Je n'ai pas non plus réussi à rendre cela réactif que lorsque je fais de l'écran plus petit, il devient très désordonné.
J'ai essayé de bricoler avec Bootstrap 4 en utilisant Col-SM-6 mais cela n'a pas fonctionné pour moi. J'ai aussi essayé d'utiliser le débit et le flottant dans CSS mais pas de chance. css Je pense que la sortie soit sensible et montrer 2 ou 3 colonnes de titres de menu sur un écran plus grand.
3 Réponses :
Vous pouvez le faire très simplement avec une requête médiatique et de simples flotteurs et de pseudo-sélecteurs. Il vous permettra d'empiler le contenu dans un débit normal par défaut par défaut (idéal pour les plus petits fenêtres), mais définissez les conteneurs côte à côte à l'aide de valeurs de flottabilité et de largeur pour des fenêtres plus grandes.
Voici un exemple d'une disposition simple à base de flottabilité qui Permet de multiples sections parallèles qui répondent bien sur plusieurs fenêtres. Voici une démonstration de Codepen de sections parallèles avec des flotteurs , suivi du code de travail et d'une explication: p>
p>
<div class="parent">
<div class="parallel">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
<div class="parallel">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
<div class="parallel">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
<div class="parallel">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
</div>
<div class="parent">
<div class="parallel">
<h2>Section 5 — Oops! No siblings!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
</div>: non (: unique-enfant) code> vous permet d'appliquer la plus grande division de la fenêtre uniquement si l'élément parallèle a des frères et sœurs dans sa rangée. Il s'agit simplement d'une prise utile au cas où une section doit être de manière à elle-même ou un frère de frère est temporairement retiré. Vous n'avez pas besoin de bricoler avec le balisage, mais laissez CSS gérer s'il sépare l'écran ou non. Li>
- Les articles qui flottent à gauche doivent effacer les deux et les objets qui flottent à droite ne doivent bien pas clarifier correctement. Cela vous permet de placer plusieurs éléments dans le même conteneur parent et d'effectuer des lignes d'effet sans balisage ajouté. LI>
- Pour permettre aux sections de scher plutôt que d'aligner par ligne, vous pouvez supprimer
clair: les deux; code> à partir du premier sélecteur de la requête multimédia. Cela sera autrement pareil. Li>
ul> Il existe d'autres solutions plus modernes, mais c'est bien, facile et flexible, avec une balise minimale. P> P>
Vous pouvez utiliser un système de grille de bootstrap et déclarer une largeur maximale du conteneur.
Par exemple: P>
Recherchez mon code: J'ai créé un conteneur, une ligne et enfin déclarer des options de grille. P > Vérifiez Codepen pour voir comment cela fonctionne sur de petits appareils. p> COL-XL-12 CODE> - Extra grand écran = largeur complète.
Col-XL-4 Code> - Extra grand écran = 1/3 largeur d'écran. P>
Ici, vous avez une solution simple Fondamentalement, vous pouvez utiliser les classes p> col - * code> pour structurer la ligne comment vous voulez; bien sûr; Le problème que vous pourriez avoir pourrait être que vous avez besoin que chaque colonne soit pour différents types d'articles; afin que vous puissiez les traiter comme rangées em>; Vous avez la possibilité de définir flex-colonne code> afin qu'ils se comportent plus comme si vous avez besoin; Mais certains ajustements supplémentaires sont nécessaires que j'ai réellement utilisé sur le deuxième exemple en utilisant uniquement Flexbox. P>
<div class="container">
<div class="starters item">
<h1>Starters</h1>
<hr>
<div class="menu-item">
<header>Vegetable Spring Roll</header>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
</div>
</div>
<div class="menu-item">
<header>Chicken Cheese Roll</header>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
</div>
</div>
<div class="menu-item">
<header>Vegetable Spring Roll</header>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
</div>
</div>
</div>
<div class="mains item">
<h1>Mains</h1>
<hr>
<div class="menu-item">
<header>Chicken Cheese Roll</header>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
</div>
</div>
<div class="menu-item">
<header>Vegetable Spring Roll</header>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
</div>
</div>
<div class="menu-item">
<header>Chicken Cheese Roll</header>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit quam quo quaerat illum, vero numquam eligendi pariatur, est debitis voluptate dolores. Nesciunt doloremque cupiditate quo voluptatibus provident dicta iste ad?
</div>
</div>
</div>
</div>
Bienvenue dans le débordement de la pile! Veuillez lire: Comment créer un exemple minimal, complet et vérifiable . Vous avez seulement inclus une partie du code. Je ne vois que "Démarreurs", donc je suppose que le HTML est incomplet dans votre exemple. Vous devez modifier la question pour inclure une version minimale de ce que vous travaillez.