为什么我的 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>
);

这对我有用。