代码之家 › 专栏 › 技术社区 › Natalie Perret

如何右对齐引导4卡体中的A<img>?

right-align bootstrap-4 alignment css

Natalie Perret · 技术社区 · 6 年前

我正在尝试右对齐引导4中的A card-body 我试图利用 float-right 但它似乎不起作用。在图像对齐方面有什么特别的吗 卡片正文 ?

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

知道吗?

2 回复 | 直到 6 年前

××× × ×××× 6 年前

第一次使用 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>

MirzetKameric 6 年前

应该有几个解决办法。最简单的方法是将图像显示为内联块,并在其父元素的右边添加文本对齐。