使用 Reactstrap 时出现媒体对象对齐问题

Question

这是how I want my page to look

但是，我的问题是this is how it ends up looking like

我尝试更改列大小，并尝试将两个列类标签 col-5 和 col-7 分别放置在两个媒体对象中，这些对象分别保存图像和文本，就像我在 Bootstrap 中所做的那样，但它没有似乎有效。

我的 React Component 是按照如下代码渲染的

render(){
        const menu = this.state.dishes.map((dish) => {
            return (
                <Media>
                  <Media left middle>
                      <Media object src={dish.image} alt={dish.name} />
                  </Media>
                  <Media body className="ml-5">
                    <Media heading>{dish.name}</Media>
                    <p>{dish.description}</p>
                  </Media>
                </Media>
                );
        } );
        return (
            <div className="container">
                <div className="row">
                    <Media list>
                        {menu}
                    </Media>
                </div>
            </div>

        );
    }
}

谁能帮我看看哪里出错了？

Answer 1

这听起来很愚蠢，但做了两个小调整就奏效了。问题是我将组件分成两列并没有发生在单个组件中。

调整 1： 从返回容器中删除了“行”div

调整 2：将行 div 添加到渲染的 JSX，并将类 col-3 和 col 9 添加到图像和正文

return (
              <div key={dish.id} className="row text-center mt-5">
                // Add a col-3 class to the image 
                  <Media className ="col-3">
                      <Media object src={dish.image} alt={dish.name} />
                  </Media>
                // Add a col-9 class to the body 
                  <Media body className="col-9 ml-5">
                    <Media heading>{dish.name}</Media>
                    <p>{dish.description}</p>
                  </Media>
                
              </div>
            );

现在可以了

Answer 2

检查您的引导程序版本，我已经从 5.0.2（对我来说是最新的）回滚到 4.0.0，它确实有效。

我做了什么：

1. 将“package.json”中bootstrap的版本设置为“^4.0.0”
2. 删除了“node_modules”文件夹
3. 运行“npm install”

此外，如果您检查reactstrap homepage，它会说它使用“Bootstrap 4 组件”。也许它与 bootstrap 5 不兼容。

Answer 3

您可能正在使用引导程序 5。 如果你想继续在课程中使用BS5（我就是这样做的），你必须根据bootstrap 5的新规则来定义Media。这里是官方的解释： https://getbootstrap.com/docs/5.1/utilities/flex/#media-object

这是最终代码：

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