如何实现li内div中文本与图片并排对齐 避免窄宽度下图标换行

问题根因 #

1. Bootstrap4 栅格系统不存在col-s-*这类断点前缀，仅col-*（<576px）、col-sm-*（≥576px）等规则生效，你写的col-s-6在小宽度场景下不会生效，会导致每个div默认占满整行触发换行
2. 文本容器没有设置不折行规则，宽度不足时会挤压右侧图标区域
3. 行容器没有配置垂直对齐规则，导致文本和图标竖向不对齐

修复方案 #

1. 替换无效栅格类，改用flex直接控制布局 #

把li内部的row和col结构简化，直接用flex布局更可控，修改a标签内部代码如下：

<a class="text-dark d-flex align-items-center justify-content-between w-100" href="TestResults?blablabla" target="_blank" >
  <!-- 文本区域：禁止折行，溢出可自动显示省略号 -->
  <div class="text-nowrap text-truncate mr-2">
    test - 12345
  </div>
  <!-- 图标区域：flex不换行，元素居中对齐 -->
  <div class="d-flex align-items-center flex-nowrap">
    <img class="mx-1" src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
    <div id="svg_dashboard_weather" class="element_weather" title="5/5">
      <!-- 原有svg代码保持不变 -->
      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
        <g id="Sun">
          <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
          <g>
            <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
            <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
            <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
            <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
            <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
            <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
            <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
            <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
            <animate attributeType="CSS"
               attributeName="opacity"
               attributeType="XML"
               dur="0.5s"
               keyTimes="0;0.5;1"
               repeatCount="indefinite"
               values="1;0.6;1"
               calcMode="linear"/>
          </g>
        </g>
      </svg>
    </div>
  </div>
</a>

2. 调整天气图标样式，移除多余的强制宽高影响 #

.element_weather {
    /* 把强制min宽高改成固定尺寸，避免撑大容器 */
    height: 25px !important;
    width: 25px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

3. 可选配置：如果需要文本溢出显示省略号，给li加溢出隐藏规则 #

.list-group-item {
  overflow: hidden;
}

修改完成后，不管li宽度多小，文本和图标都会保持在同一行，文本过长会自动显示省略号，不会挤压图标换行，同时默认垂直居中对齐符合预期效果。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup