1

我试图在 Bootstrap 4 中右对齐 a 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>

任何想法？

4

3 回答 3

2

首先使用col-md-10/col-md-2而不是 col-10-md/col-2-md

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

但是我认为您必须设置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>

于 2018-05-28T09:23:55.810 回答
1

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

于 2018-05-28T09:33:17.953 回答
0

I recommend this code I found:

<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>

enter image description here

于 2020-12-01T20:51:51.280 回答