J'ai une disposition de grille bootstrap dans mon application Web, je veux aligner tout sur la même ligne. Par exemple, lors du chargement en plein écran, les cartes sont les suivantes:
Toutefois, lorsque la page est redimensionnée, les cartes apparaissent comme suit.
J'ai besoin de les faire ressembler à la première image quelle que soit la page redimensionnée, je ne sais pas comment aller à propos de cela.
ci-dessous est mon code:
3 Réponses :
Dans votre code, vous utilisez Col-MD-8 qui fonctionnera à partir de min-largeur de 992px. Vous pouvez remplacer
<div className="d-flex col-sm-6">
<div className="" style={{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
<div className="row">
<div className="d-flex col-xs-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.restaurant.name}</b>
{this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
return(<div key={index}><span className="badge-sm badge-secondary" style={{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span> </div>);
})}
</h4>
{this.props.restaurant.description}
<br /><br />
<span className="munchtime pointer"><i className="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>${this.props.restaurant.price}</s></b> <span className="discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
</div>
</div>
<div className="d-flex col-xs-4">
<img src={this.props.restaurant.images[0]} style={{width: '100%', height: 250, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
You should only have to adjust the "col" className so that it is always 8 and 4 on any breakpoint.
Divisez simplement la grille en 5 par 3 de 3% pour toutes les vues (XS, SM, MD) lorsque la largeur totale du conteneur est de 8.
Points d'arrêt des requêtes multimédia: Les requêtes multimédias de la grille p>
sont ci-dessous avec le p>
p >
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex col-md-8">
<div class="" style="background-color: 'white', border-radius: 5, border: '1px solid #EAE8E8'">
<div class="row">
<div class="d-flex col-xs-5 col-sm-5 col-md-5">
<div class="row" style="padding-top: 20, padding-bottom: 20, padding-left: 40">
<h4>
<b> restaurant name</b>
<div key=1><span class="badge-sm badge-secondary" style="color: 'white', background-color: '#DA9550', font-size: 9">dietaryRestriction</span> </div>
</h4>
restaurant description
<br /><br />
<span class="munchtime pointer"><i class="fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
<b><s>$2000</s></b> <span class="discount"><b>20%</b></span>
</div>
</div>
<div class="d-flex col-xs-3 col-sm-3 col-md-3">
<img src='https://picsum.photos/200/300
' style="width: '100%', height: 250, objectFit: 'cover'" />
</div>
</div>
</div>
</div>