如何在Bootstrap 4的card-body中右对齐<img>元素？

我在Bootstrap 4的card-body里尝试给<img>元素添加float-right类来实现右对齐，但这个类似乎完全没生效。想请教下在Card组件的body里做图片对齐有没有什么特殊注意事项？我的代码如下：

<div class="card border-primary m-3" *ngIf='product'> 
  <div class="card-header bg-primary text-light text-center"> 
    {{ pageTitle + ': ' + product?.productName }} 
  </div> 
  <div class="card-body"> 
    <div class="row"> 
      <div class="col-2-md"> 
        <table> 
          <thead> 
            <tr> 
              <th></th> 
              <th></th> 
            </tr> 
          </thead> 
          <tbody> 
            <tr> 
              <td>Id:</td> 
              <td>{{ product.productId }}</td> 
            </tr> 
            <tr> 
              <td>Name:</td> 
              <td>{{ product.productName }}</td> 
            </tr> 
            <tr> 
              <td>Code:</td> 
              <td>{{ product.productCode }}</td> 
            </tr> 
            <tr> 
              <td>Release Date:</td> 
              <td>{{ product.releaseDate }}</td> 
            </tr> 
            <tr> 
              <td>Price:</td> 
              <td>{{ product.price }}</td> 
            </tr> 
            <tr> 
              <td>Description:</td> 
              <td>{{ product.description }}</td> 
            </tr> 
            <tr> 
              <td>Rating:</td> 
              <td> 
                <app-star [rating]='product.starRating'></app-star> 
              </td> 
            </tr> 
          </tbody> 
        </table> 
      </div> 
      <div class="col-10-md"> 
        <img class="card-img-top float-right" [src]='product.imageUrl'> 
      </div> 
    </div> 
  </div> 
  <div class="card-footer"> 
    <button class="btn btn-secondary" (click)='onBackClicked()'> 
      <i class="fa fa-chevron-left"></i> Back to List</button> 
  </div> 
</div>

解决思路与方案： #

嘿，我来帮你排查下问题，这里有几个关键点需要注意：

• 列类名写反了！这是核心问题：你代码里的col-2-md和col-10-md是错误的Bootstrap列语法！正确的响应式列类格式应该是col-[断点]-[宽度]，也就是col-md-2和col-md-10——数字要放在断点标识（md）的后面。这个错误会直接导致你的网格布局失效，图片所在的列根本没有正确分配宽度，自然没法实现右对齐。先把这个改过来，大概率问题就解决了。

• 用Flex布局替代浮动更可靠：Bootstrap的Card组件本身是基于Flexbox的，有时候浮动类在Flex容器内的表现会不稳定。如果改完列类后还是有问题，可以直接给图片所在的容器添加Flex对齐类：

  <div class="col-md-10 d-flex justify-content-end">
    <img class="card-img-top" [src]='product.imageUrl'>
  </div>
  

  d-flex把容器变成Flex容器，justify-content-end直接让内部元素右对齐，比浮动更适配Card的布局环境。

• 检查图片宽度是否占满容器：如果图片本身的宽度已经撑满了整个列的宽度，那右对齐的效果是看不出来的。可以给图片加个固定宽度或者最大宽度限制，比如：

  <img class="card-img-top float-right" [src]='product.imageUrl' style="max-width: 250px;">
  

  或者用Bootstrap的img-fluid类让图片自适应容器（但如果容器宽度够大，还是会占满），这样就能看到对齐效果了。

• 必要时清除浮动：虽然Bootstrap 4的card-body已经内置了清除浮动的处理，但如果你的内容结构比较复杂，也可以在图片所在容器的末尾加上<div class="clearfix"></div>，确保浮动不会影响其他元素的布局。

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