在 d flex 中不能左右移动

【问题标题】：Cant move to right and left while in d flex在 d flex 中不能左右移动
【发布时间】：2022-01-11 11:45:05
【问题描述】：

我有一个问题，如下图所示，我希望 1 在左侧，2 在右侧。我的代码有什么问题？

<div className="mt-5 mx-5 py-3 shadow bg-white">
  <div className="d-flex justify-content-center">
    <div style={{ float: "left", display: "flex" }}>
      <div className="p-2">1</div>
    </div>
    <div className="p-2 me-4">Popular Products</div>
    <div className="p-2">Low Prive</div>
    <div className="p-2 ms-4">High Price</div>
    <div style={{ float: "right", display: "flex" }}>
      <div className="p-2">2</div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css reactjs bootstrap-5

【解决方案1】：

你需要使用 justify-content-between

    <div className="mt-5 mx-5 py-3 shadow bg-white">
            <div className="d-flex justify-content-between">
                <div>
                    <div className="p-2">1</div>
                </div>

                <div className="d-flex justify-content-center w-100">
                    <div className="p-2 me-4">Popular Products</div>
                    <div className="p-2">Low Prive</div>
                    <div className="p-2 ms-4">High Price</div>
                </div>

                <div>
                    <div className="p-2">2</div>
                </div>
            </div>
        </div>

【讨论】：

谢谢，如何放实际图片而不是链接？
您可以在
中删除 w-100
我加了另一个答案教你加图
好的，非常感谢呵呵
我编辑了我的答案并向你展示了。祝你好运