包含10个col标签的div row布局错位，需实现正确对齐

问题根源分析 #

你提供的代码存在3个核心结构错误：

• 错误的元素嵌套：直接在row内嵌套带row类的元素，且row与col类混用（<div class="row col 6">），违反Bootstrap的布局层级规范（正确层级是：容器 → row → col → [row → col]）。
• 列嵌套不规范：col-sm-1内直接放置col-md-3，缺少中间的row容器，导致默认内边距（padding）和外边距（margin）冲突，引发错位。
• 类名格式错误：col 6不是合法的Bootstrap类名，正确写法应为col-6。

正确实现代码 #

基础版（无嵌套，适配10个列对齐） #

<div class="container"> <!-- 用container包裹row，确保合理左右边距 -->
  <div class="row">
    <!-- 10个列元素，分别设置sm/md断点的宽度 -->
    <div class="col-sm-1 col-md-1">内容1</div>
    <div class="col-sm-1 col-md-1">内容2</div>
    <div class="col-sm-1 col-md-1">内容3</div>
    <div class="col-sm-1 col-md-1">内容4</div>
    <div class="col-sm-1 col-md-1">内容5</div>
    <div class="col-sm-1 col-md-1">内容6</div>
    <div class="col-sm-1 col-md-1">内容7</div>
    <div class="col-sm-1 col-md-1">内容8</div>
    <div class="col-sm-1 col-md-1">内容9</div>
    <div class="col-sm-1 col-md-1">内容10</div>
    <!-- 可选：添加空列填充剩余2份宽度，避免右侧留白不均 -->
    <!-- <div class="col-sm-2 col-md-2"></div> -->
  </div>
</div>

嵌套列版（若需内部子布局） #

如果每个列内部还有层级结构，必须遵循col → row → col的嵌套规则：

<div class="container">
  <div class="row">
    <div class="col-sm-1 col-md-1">
      <div class="row">
        <div class="col-md-12"> <!-- 子列占满父列宽度 -->
          内容1
        </div>
      </div>
    </div>
    <!-- 重复上述结构到第10个列 -->
    <div class="col-sm-1 col-md-1">
      <div class="row">
        <div class="col-md-12">
          内容10
        </div>
      </div>
    </div>
  </div>
</div>

额外注意事项 #

• 确保正确引入对应版本的Bootstrap CSS文件（上述代码适配v4/v5版本，v3版本类名细节略有差异）。
• 若需要小屏幕下更合理的换行布局，可调整col-sm-*的数值，比如改为col-sm-2，10个列会每行显示5个。

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