Bootstrap4中SVG图片col-lg右对齐、col-xs居中布局调整求助

嘿，我看了你写的代码，思路方向是对的，但有几个小细节可以调整，让它更贴合Bootstrap 4的栅格规范，完美实现你要的响应式对齐效果。

原代码的小问题 #

1. 缺少row容器：Bootstrap栅格系统要求container/container-fluid下必须嵌套row，再在row里放col-*，否则会出现不必要的间距和布局偏移。
2. 对齐类匹配错误：你需要**移动端（xs尺寸）**居中，应该用text-xs-center，而原代码的text-sm-center对应的是sm（≥576px）尺寸及以上的居中，不符合需求。
3. 多余的float-left：Bootstrap的col-*在row中默认就是横向排列的，手动加float-left可能会打乱响应式切换时的布局逻辑。

修正后的完整代码 #

<div class="container-fluid">
  <div class="row">
    <!-- 第一个列：lg占6份，xs占12份 -->
    <div style="border:1px solid #cc0000;" class="col-lg-6 col-xs-12 text-lg-right text-xs-center">
      <img src="nps-icon.svg" alt="Net Promoter Score" width="175" height="150" class="mx-auto d-block" />
    </div>
    <!-- 第二个列：遵循同样的响应式规则 -->
    <div style="border:1px solid #cc0000;" class="col-lg-6 col-xs-12 text-lg-right text-xs-center">
      <img src="your-second-svg.svg" alt="Your SVG Alt Text" width="175" height="150" class="mx-auto d-block" />
    </div>
  </div>
</div>

关键类的作用解释 #

• row：作为列的容器，负责消除列的默认间距，保证栅格布局的正确性。
• col-lg-6 col-xs-12：在lg（≥992px）屏幕下每个列占6个栅格（一半宽度），在xs（<576px）屏幕下占12个栅格（全屏宽度）。
• text-lg-right text-xs-center：分别控制lg尺寸下元素右对齐，xs尺寸下元素居中对齐。
• mx-auto d-block：给SVG添加这个类，确保在xs尺寸下，即使父元素的text-center失效（比如SVG是块级元素时），也能通过mx-auto实现水平居中，d-block把SVG转为块级元素，让mx-auto生效。

这样调整后，就能精准实现你要的效果：在大屏（lg及以上）时SVG右对齐，移动端（xs）时居中显示啦。

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