Bootstrap 4站点：container-fluid应加在body还是main层级？

好问题！在Bootstrap 4项目里，container-fluid的放置位置完全取决于你的页面布局需求，但咱们可以结合实际开发场景聊聊每种写法的实用性：

1. 加在<body>标签上（第一种写法） #

这种做法非常少见，原因很简单：<body>是页面的根容器，给它添加container-fluid会让所有子元素（header、main、footer等）都继承它的左右内边距和100%宽度设置。这意味着你没法单独控制某个区块的布局——比如你想让header是无内边距的通栏，或者footer用固定宽度的container，这种写法会彻底锁死你的布局灵活性，所以几乎不会在实际项目中使用。

对应的代码示例：

<html> 
  <head></head> 
  <body class="container-fluid"> 
    <header></header> 
    <main></main> 
    <footer></footer> 
  </body> 
</html>

2. 只加在<main>标签上（第二种写法） #

这是很常用的场景之一。如果你的页面设计是：

• header和footer采用通栏布局（比如背景色铺满全屏，内部内容用container固定宽度）
• main区域需要全屏宽度且带有左右内边距（比如展示全屏的文章内容、图片轮播等）

那只给<main>添加container-fluid就非常合适，既能满足main区域的布局需求，又不影响header和footer的独立布局。

对应的代码示例：

<html> 
  <head></head> 
  <body> 
    <header></header> 
    <main class="container-fluid"></main> 
    <footer></footer> 
  </body> 
</html>

3. 给每个区块（header、main、footer）分别添加（第三种写法） #

这种写法同样常用，尤其适合每个区块都需要独立的全屏内边距控制的场景。比如：

• header里的导航内容需要全屏宽度且带有自定义内边距
• main区域的内容需要全屏展示，内边距和header不同
• footer的版权信息也需要全屏宽度，且有自己的内边距设置

给每个区块单独加container-fluid的好处是，各个区块的布局互不干扰，你可以通过自定义CSS轻松调整每个区块的内边距、背景色等样式，灵活性拉满。

对应的代码示例：

<html> 
  <head></head> 
  <body> 
    <header class="container-fluid"></header> 
    <main class="container-fluid"></main> 
    <footer class="container-fluid"></footer> 
  </body> 
</html>

总结 #

• 优先选择第二种或第三种写法，完全看你的布局需求：
  • 若header/footer是通栏设计，仅main需要全屏内边距：选第二种
  • 若每个区块都需要独立的全屏内边距控制：选第三种
• 第一种写法因限制布局灵活性，几乎不会被采用

内容的提问来源于stack exchange，提问作者Paul Taylor