Question

我最近开始学习反应和反应带，我想使用 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",
      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>
);

这对我有用。

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

1 个答案: