如何实现左图右文布局？为何文本横向排列而非换行？

你碰到的这个问题，核心是Flexbox布局的默认行为在起作用：
当你把<img>和多个<p>标签直接放在d-flex容器里时，Flex容器会把所有直接子元素（包括图片和每一个<p>）都当作独立的flex item，默认按照flex-direction: row（横向）排列，所以图片和三个<p>会挤在同一行，完全不是你想要的「图片左、文本块右且内部竖排」的效果。

要实现左侧图片、右侧文本竖排的布局，你只需要把右侧所有<p>标签包裹进一个容器里，让这个容器成为Flex容器的子元素。这样Flex容器就只会把「图片」和「文本容器」这两个元素横向排列，而文本容器内部的<p>会默认竖向排列（因为文本容器不是flex容器的话，块级元素<p>会自动换行）。

修改后的HTML代码如下：

<div class="text-center">
  <div class="d-flex flex-row justify-content-center align-items-center">
    <img src="http://via.placeholder.com/100x100"/>
    <!-- 新增容器包裹所有p标签 -->
    <div class="ms-3"> <!-- ms-3用来给图片和文本加间距，可按需调整 -->
      <p><strong class="text-bg-gray">Item1: </strong>value1</p>
      <p><strong class="text-bg-gray">Item2: </strong>valu2</p>
      <p><strong class="text-bg-gray">Item3: </strong>value3</p>
    </div>
  </div>
</div>

补充说明 #

• 新增的<div>是核心，它把所有文本元素整合为一个单独的flex item，和图片并列在Flex容器的横向布局中。
• ms-3是Bootstrap的间距类，用来给图片和文本容器之间添加左侧间距，让布局更美观，你可以根据需求换成ms-2、ms-4这类不同间距值的类。
• 如果希望文本容器内部的元素对齐方式调整，还可以给这个容器加额外的类，比如text-start让文本左对齐，或者d-flex flex-column justify-content-center让文本在垂直方向居中（当图片高度比文本高时会更实用）。

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