顺风宽度不起作用

Question

在下图中，该导航器上有一个导航栏，有一张卡片，我想增加该卡片的宽度，以便我看起来像预期结果图像

代码输出图像

<div className=" z-10 bg-blue-100  ">
        <div className=" z-23  flex flex-row justify-center items-center h-10">
          <div className=" -translate-y-32 z-30">
            <div className="flex flex-row justify-center items-center mt-8 px-4 lg:px-6">
              <div className="sm:mx-auto lg:mx-20 sm:text-center">
                <div className="  w-full  mx-auto  p-2">
                  <div className="flex flex-col mt-32 sm:mt-20 sm:flex-row md:flex-row lg:flex-row  items-center shadow-lg rounded-lg bg-white ">
                    {/* <!-- Image Div --> */}
                    <div className="">
                      <Image
                        src="MainFooter.svg"
                        alt="Image"
                        width={360}
                        height={100}
                      />
                    </div>
                    {/* <!-- Content Div --> */}
                    <div className="px-8 py-6 text-left">
                      <h2 className="mb-2 text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 leading-relaxed font-extrabold">
                        Stay Updated With <br /> Financial Compliance
                      </h2>
                      <p className="mt-4 mb-6 max-w-md text-sm sm:text-base text-gray-700 font-light">
                        Subscribe to our newsletter for compliance updates and
                        tips
                      </p>
                      <form action="#" className="mb-4">
                        <div className="flex flex-col sm:flex-row sm:justify-start">
                          <input
                            className="block w-full sm:w-auto mb-2 sm:mb-0 sm:mr-2 px-4 py-3 text-sm text-gray-900 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                            type="email"
                            placeholder="Enter email here"
                            required
                          />
                          <button
                            type="submit"
                            className="py-3 px-6 ml-2 mt-2 sm:mt-0 text-sm font-medium text-white rounded-md bg-orange-500 border border-orange-600 hover:bg-orange-600 focus:ring-2 focus:ring-orange-300"
                          >
                            Get Updates
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
</div>

预期结果

我想要我的导航栏卡宽度如上图所示，但我无法实现

Answer 1

我不确定这里的问题是什么，容器宽度似乎工作正常。我可以给你一些提示：

• “flex-row”是 flex-direction 的默认值，因此您不需要指定它（除非您在配置文件中将 flex-col 设置为默认值）。
• 如果设置断点，它的工作方式类似于最小宽度断点。例如，无需设置“flex-col sm:flex-row md:flex-row lg:flex-row”，您只需编写“flex-col sm:flex-row”即可，它适用于中型和中型大屏幕也是如此。 （文档链接）
• 要使图像像所需的结果一样溢出，您可以向容器 div 添加“相对”类，向图像 div 添加“绝对 left-0 Bottom-0”，并添加另一个与图像宽度相同的 div 以加宽容器，像这样：

<div className="flex mt-32 sm:mt-20 items-center shadow-lg rounded-lg bg-white text-black relative">
  {/* <!-- this div just widens the container--> */}
  <div className="w-[360px]"></div>
  {/* <!-- Image Div with absolute position--> */}
  <div className="absolute left-0 bottom-0">
    <img src={pic} alt="Image" width={360} height={100} />
  </div>
  {/* <!-- Content Div --> */}
</div>