在Bootstrap 4的.row下的.col元素中使用ID是否合理？

这绝对是没问题的做法，不用纠结~

首先明确Bootstrap的核心规则：.row的直接子元素确实应该是带.col-*类的列元素，但这只是对结构层级的要求——意思是你不能把非列元素直接塞在.row里，而不是说列元素本身不能加额外的属性或自定义标识。

针对你给出的两种写法：

• 第一种写法：

  <div class="container">
    <div class="row">
      <div id="style1" class="col-12"> </div>
      <div id="style2" class="col-12"> </div>
    </div>
  </div>
  

  完全符合Bootstrap的布局规范！.row的直接子元素依然是标准的.col-12列，给列元素加ID只是为它添加了唯一标识，不管是用来绑定自定义样式、做JS选择器还是设置锚点，都是完全合法且常用的开发方式。

• 第二种写法在列内部额外套一层带ID的div，当然也可行，但属于没必要的冗余嵌套——除非你有特殊布局需求（比如需要让内部元素突破列的padding，或者需要独立的块级上下文），否则直接给列加ID更简洁。

额外提醒两点：

• 只要ID符合HTML规范（页面唯一、命名合法），Bootstrap不会对此有任何限制；
• 真正需要避免的是：在.row下直接放置不带.col-*类的元素，这会破坏栅格系统的间距（gutter）机制，导致布局错乱。

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