如何在Tailwind/Flowbite中让内容列与Navbar宽度一致？

问题出在内容区域没有和Navbar使用相同的宽度约束：Navbar通过container mx-auto控制了最大宽度并居中，而内容列直接使用了全屏宽度的grid布局，导致宽度超出Navbar。

以下是两种可行的修改方案：

方案1：嵌套container容器 #

把内容的grid布局放到和Navbar一致的container mx-auto容器内，让内容继承相同的宽度规则：

<!-- 修改后的内容区域代码 -->
<div class="container mx-auto">
  <div class="grid grid-cols-2 gap-4">
    <div class="bg-gray-100 p-4">Left Column</div>
    <div class="bg-gray-100 p-4">Right Column</div>
  </div>
</div>

方案2：直接添加宽度约束类 #

如果不想额外嵌套容器，可以直接给内容grid添加和默认container一致的宽度与内边距类，实现对齐：

<!-- 修改后的内容区域代码 -->
<div class="grid grid-cols-2 gap-4 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="bg-gray-100 p-4">Left Column</div>
  <div class="bg-gray-100 p-4">Right Column</div>
</div>

两种方案都能让内容列的宽度和Navbar完全匹配，选你习惯的写法即可。

内容的提问来源于stack exchange，提问作者Ahmed B