Bootstrap网格布局下图片与文本无法并排显示，哪里出错了？

你当前使用的是Bootstrap栅格布局，两个col-lg-6默认采用顶部对齐规则，且图片宽度被限制在列容器宽度内，所以既容易出现垂直方向错位，也无法实现图片溢出屏幕的效果。

具体修改方案 #

1. 并排对齐修复 #

给父级.row添加垂直对齐规则即可解决错位问题，按需选择对齐方式：

.row {
  align-items: center; /* 文本和图片垂直居中对齐 */
  /* 要顶部对齐的话替换为 align-items: flex-start */
}

2. 图片超出屏幕效果实现 #

删掉你之前给图片设置的width: 100%、给列设置的overflow: hidden，按下方规则调整样式：

/* 全局隐藏横向滚动条，避免图片溢出后出现滚动条 */
body {
  overflow-x: hidden;
}

/* 右侧图片所在列配置 */
.col-lg-6:last-child {
  position: relative;
  overflow: visible;
}

/* 图片样式调整 */
.image {
  width: 115%; /* 数值越大图片越宽，溢出部分越多，可按需调整 */
  position: relative;
  right: -10vw; /* 向右偏移量，数值越大溢出屏幕的部分越多，可按需调整 */
  height: auto; /* 保持图片原始比例 */
  display: block; /* 消除图片默认自带的底部空白 */
}

效果说明 #

• 文本和图片会保持你设定的对齐规则，不会出现上下错位
• 图片会向右侧屏幕外延伸，不会被列容器裁剪
• 保留Bootstrap栅格原生响应式特性，小屏幕下内容会自动堆叠，不会出现布局错乱

内容的提问来源于stack exchange，提问作者Queen of sorts