Question

这是代码段。

<div class="row col-xs-12">
<a *ngFor="let rec of recipe "href="#" class="list-group-item clearfix">
    <div class="float-left">
        <h4 class="list-group-item-heading">{{rec.name}}</h4>
        <p class="list-group-item-text">{{rec.description}}</p>
    </div>
    <span class="float-right">
        <img [src]="rec.imagePath" alt="{{rec.name}}" class="img-responsive" style="max-height: 50px;">
    </span>
</a>
<app-recipe-item></app-recipe-item>

我想知道为什么浮右也不会将图像与右侧对齐。如果我使用insetead pull-right它正在工作。我已经读过引导程序4我们应该浮动而不是拉动。

Answer 1

我删除了list-group-item，list-group-item-heading，list-group-item-text，但它确实有效。

<a href="#" class="clearfix" *ngFor="let recipe of recipes">
        <div class="float-left">
            <h4>{{ recipe.name }}</h4>
            <p>{{ recipe.description }}</p>

Answer 2

我通过删除 col 类中的 xs-12 说明符解决了这个问题。

<div class="row">
  <div class="col">
    <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
      <div class="float-left">
        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
        <p class="list-group-item-text">{{ recipe.description }}</p>
      </div>
      <span class="float-right">
        <img
          [src]="recipe.imagePath"
          alt="{{ recipe.name }}"
          class="img-responsive"
          style="max-height: 50px"
        />
      </span>
    </a>
    <app-recipe-item></app-recipe-item>
  </div>
</div>

为什么浮右，浮左不能正常工作？

2 个答案: