如何右对齐 <img> in Bootstrap 4 card-body？

Question

我试图将 Bootstrap 4 card-body 中的 a 右对齐，我试图利用 float-right class 但它似乎不起作用。 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>

有什么想法吗？

Answer 1

首先使用 col-md-10/col-md-2 和 NOT col-10-md/col-2-md

我只为 snnipet 设置了 col-sm-10 以查看更改

但是我认为你必须设置 col-md-4 和 col-md-8 但这是你的决定...

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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-sm-2">
          <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-sm-10">
          <img class="card-img-top" src='https://material.angular.io/assets/img/examples/shiba1.jpg'>
        </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>

Answer 2

应该有几个解决方案。最简单的方法是将图像显示为内联块并添加 text-align: right 到其父元素。

Answer 3

我推荐这个我找到的代码：

<div class="card" style="max-width: 500px;">
    <div class="row no-gutters">
        <div class="col-sm-5" style="background: #868e96;">
            <img src="images/sample.svg" class="card-img-top h-100" alt="...">
        </div>
        <div class="col-sm-7">
            <div class="card-body">
                <h5 class="card-title">Alice Liddel</h5>
                <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
                <a href="#" class="btn btn-primary stretched-link">View Profile</a>
            </div>
        </div>
    </div>
</div>

如何右对齐 <img> in Bootstrap 4 card-body？

How to right align a <img> in Bootstrap 4 card-body?

css

alignment

right-align

bootstrap-4