Bootstrap网格系统使用疑问：容器、行、列的最佳实践

1. 何时何地使用container？ #

• container是固定宽度容器，在不同屏幕断点下有预设的最大宽度，左右带自动margin，适合大多数居中布局的页面内容；container-fluid是100%宽度容器，无左右margin，适合需要全屏展示的模块（比如全屏横幅、宽度铺满的表单）。
• 最佳实践：
  • 不需要给每个组件都加container，根组件（比如index.html的根容器）可设置一个全局的container/container-fluid，子组件直接基于这个布局即可。
  • 若组件是独立的、需要固定宽度的内容块，单独加container；若是全屏模块，用container-fluid。
  • 尽量不要嵌套container，因为container自带padding和margin，嵌套会产生多余间距和布局错位，内部布局应该用row + col实现。

2. 能否直接在col中嵌套col？ #

不行，嵌套col必须用row包裹。

Bootstrap的col默认带有左右padding，而row带有负margin，用来抵消父级col的padding，确保嵌套的col能和外层网格对齐。你提供的示例代码会导致内层col的左右padding无法被抵消，出现错位和多余间距。正确写法如下：

<div class="row">
   <div class="col-6">
      <div class="row"> <!-- 必须添加这一层row -->
         <div class="col-6">  
            some content           
         </div>
         <div class="col-6">
            some content
         </div>
      </div>
   </div>
   <div class="col-6">
      some content
   </div>
</div>

3. 何时适合使用row，何时不建议使用？ #

• 适合用row的场景：当你需要将容器内的空间分割成多个列布局时，用row包裹col，比如多栏表单、卡片列表、图文混排的分栏结构。
• 不建议用row的场景：普通单栏内容（比如段落、单个卡片、标题）不需要套row，直接放在container或其他容器里即可。row的负margin会导致内容可能溢出容器，或产生不必要的间距，破坏布局。

4. 能否在没有container/container-fluid的情况下使用row？ #

可以，但强烈不推荐。

row的负margin是为了抵消container的padding设计的，若没有container，row的负margin会让内容超出视口左右边缘，出现横向滚动条。如果非要这么做，你需要手动给row的父容器添加和col一致的padding来抵消负margin，但这违背了Bootstrap的网格设计规范，容易引发兼容性和布局错位问题。

内容的提问来源于stack exchange，提问作者Mohammed Abdu