如何实现两个Bootstrap列并排？col-1与col-11对齐异常求助

嘿，我太懂你这种明明按规则操作却达不到预期的挫败感了！你遇到的col-1和col-11上下堆叠的问题，大概率是布局结构的嵌套出错了，咱们来一步步捋清楚：

问题根源分析 #

从你给出的代码片段来看，你在一个col-md-12里面直接嵌套了container-fluid，这违反了Bootstrap栅格系统的核心规则：容器（container/container-fluid）→ 行（row）→ 列（col-xx）。额外嵌套的容器会自带默认的padding和布局逻辑，直接把后面的列挤到了下一行。

修正后的代码示例 #

你需要简化结构，把要并排的两个列直接放在同一个row下，且这个row要直接隶属于容器（container或container-fluid）：

<div class="container col-md-12 wm-body">
  <div class="row" style="margin: 0px;">
    <!-- 左侧列：放置图片，自动居左 -->
    <div class="col-1">
      <img src="你的图片路径" class="img-fluid" alt="图片描述">
    </div>
    <!-- 右侧列：紧邻左侧列显示 -->
    <div class="col-11">
      <!-- 这里填入右侧的内容 -->
    </div>
  </div>
</div>

额外注意事项 #

• 给图片加上img-fluid类：这个类会让图片自适应所在列的宽度，避免图片过大撑开列导致换行；
• 响应式适配（可选）：如果希望在小屏幕上两列自动堆叠，可以把col-1和col-11换成col-sm-1和col-sm-11——这样屏幕宽度≥576px时两列并排，小屏幕下自动换行；
• 检查自定义样式：确认你没有写过覆盖Bootstrap栅格的CSS（比如给.col-*加了display: block或者width: 100%），这也会导致列无法并排。

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