为什么我的 Reactstrap 的媒体对象没有正确对齐？

Question

我最近开始学习react和reactstrap，我想使用reactstrap的媒体对象，但我的结果不是我想要的。如文档中所示，图像标题和说明应紧挨着图像，但在应用相同内容后，图像标题与说明将在图像下方对齐。我的代码结果的屏幕截图。

代码：-

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",
category: "appetizer",
label: "New",
price: "1.99",
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",
label: "",
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;

为什么我的图片标题和描述没有与图片对齐？我哪里做错了？

Answer 1

我遇到了同样的问题，在代码中找不到任何错误。我修改代码如下：

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>
);

这对我有效。

Answer 2

谢谢你的回答，我解决了这个问题。

我们必须使用"；行"；以及"；col-9"；将描述和图像放在一行中

尽管如此，我还是有点困惑：如果class＝"媒体左"；让图像向左浮动，为什么在这种情况下不起作用？

鸣谢@rmlockerd和Chaminie

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>
);

Answer 3

您可能正在使用bootstrap 5，它不再包含对象Media。请参阅引导程序5文档。我也有同样的问题。请尝试安装引导程序4。

无论如何，我刚刚将引导程序包降级到4.6.0版本，这里一切都正常。

Answer 4

试试这个

render(){
const menu = this.state.dishes.map((dish) => {
return (
<div key={dish.id} className='col-12 mt-5'>
<div className='d-flex align-items-center'>
<div className='flex-shrink-1'>
<img src={dish.image} alt={dish.name} />
</div>
<div className='flex-grow-1 ms-5'>
<h2 className='mt-0'>{dish.name}</h2>
<p>{dish.description}</p>
</div>
</div>
</div>
);
});
return (
<Container>
<row>
<div>
{menu}
</div>
</row>
</Container>
);
}