如何解决为什么我的 Reactstrap 的 Media 对象没有正确对齐?
我最近开始学习反应和反应带,我想使用 Reactstrap's Media Object 但我的结果不是我想要的。如documentation所示,图片标题和描述应该紧挨着图片,但应用相同后,图片标题和描述会在图片下方对齐。 Screenshot of my code's outcome。
代码:-
import React,{Component} from "react";
import {Media} from "reactstrap";
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
dishes: [
{
id: 0,name: "Uthappizza",image: "assets/images/uthappizza.png",category: "mains",label: "Hot",price: "4.99",description:
"A unique combination of Indian Uthappam (pancake) and Italian pizza,topped with Cerignola olives,ripe vine cherry tomatoes,Vidalia onion,Guntur chillies and buffalo Paneer."
},{
id: 1,name: "Zucchipakoda",image: "assets/images/zucchipakoda.png",category: "appetizer",label: "",price: "1.99",description:
"Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce"
},{
id: 2,name: "Vadonut",image: "assets/images/vadonut.png",label: "New",description:
"A quintessential ConFusion experience,is it a vada or is it a donut?"
},{
id: 3,name: "ElaiCheese Cake",image: "assets/images/elaicheesecake.png",category: "dessert",price: "2.99",description:
"A delectable,semi-sweet New York Style Cheese Cake,with Graham cracker crust and spiced with Indian cardamoms"
}
],};
}
render() {
const menu = this.state.dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 mt-5">
<Media>
<Media left middle>
<Media object src={dish.image} alt={dish.name} />
</Media>
<Media body className="ml-5">
<Media heading>
{dish.name}
</Media>
{dish.description}
</Media>
</Media>
</div>
);
});
return (
<div className="container">
<div className="row">
<Media list>{menu}</Media>
</div>
</div>
);
}
}
export default Menu;
解决方法
我遇到了同样的问题,在代码中找不到任何错误。我修改了代码如下:
return (
<div key={dish.id} className="col-12 mt-5">
<Media tag="ul" className="row">
<Media left middle className="col-3">
<Media object src={dish.image} alt={dish.name} />
</Media>
<Media body className="ml-5 col-9">
<Media heading>{dish.name}</Media>
<p>{dish.description}</p>
</Media>
</Media>
</div>
);
这对我有用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。