Bootstrap中row与col-md-12的区别是什么？为何页面显示无差异？

嘿，作为刚入坑Bootstrap的新手，有这个疑问真的太正常了！我来给你把这俩的区别讲明白，顺便解释下为啥你测试的两段代码看起来没啥差异～

先明确：row和col-md-12完全不是一回事 #

它们在Bootstrap栅格系统里扮演着完全不同的角色：

• row是「行容器」：它的核心作用是给列（col）提供一个正确的排版环境。Bootstrap的container默认左右有内边距（padding），而row会设置负的左右外边距（margin）来抵消这个内边距，这样里面的列就能和container的边缘完美对齐，不会出现多余的留白。另外，row还会清除内部浮动，确保列不会溢出到容器外面。
• col-md-12是「列元素」：它表示在md断点（≥768px）下占据12列的宽度（也就是100%宽度），所有col类默认都带有左右内边距，这是用来形成列与列之间的间距（gutter）的。

为啥你测试的代码看起来没差异？ #

你写的两段代码里，col都是col-xs-12 col-sm-12 col-md-12 col-lg-12，也就是在所有屏幕断点下都占满100%宽度。这种简单场景下，视觉上的差异确实非常细微：

• 带row的结构：row的负margin抵消了container的padding，col的padding直接作用在内容上，内容左右的留白刚好是col的padding值。
• 不带row的结构：container的padding加上col的padding，理论上内容左右的留白会是两者之和，但因为col是100%宽度，视觉上可能只是内容稍微往内缩了一点，如果你没仔细对比可能察觉不出来。

但这种“看起来正常”只是巧合，一旦你的页面排版变复杂，问题就会暴露出来！比如你想在col里面再嵌套row和其他列：

正确的嵌套写法（带row） #

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6">左半栏内容</div>
        <div class="col-md-6">右半栏内容</div>
      </div>
    </div>
  </div>
</div>

这个结构里，内层的row和col能完美平分宽度，排版完全正常。

错误的写法（不带外层row） #

<div class="container">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-6">左半栏内容</div>
      <div class="col-md-6">右半栏内容</div>
    </div>
  </div>
</div>

这时候内层row的负margin会和外层col的padding冲突，导致左右两边出现多余的空白，甚至内容溢出容器！

总结一下规范用法 #

Bootstrap栅格系统的正确层级永远是：
container/container-fluid → row → col
row是用来包裹col的容器，col是用来承载内容的单元，两者各司其职，不能互相替代。哪怕你只需要一个占满宽度的列，也应该用row包裹它，这样才能保证在后续扩展页面时不会出现排版问题。

内容的提问来源于stack exchange，提问作者Mr world wide