Как правильно выровнять <img>в теле карты Bootstrap 4?

Question

Я пытаюсь выровнять a по правому краю в Bootstrap 4 card-body, я пытался использовать класс 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>

Есть идеи?

Answer 1

Для этого должно быть несколько решений.Проще всего было бы отобразить изображение как inline-block и добавить text-align: right к его родительскому элементу.

Answer 2

Первое использование col-md-10 / col-md-2 и НЕ col-10-md / col-2-md

Я установил 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>