css HTML< a>标记将文本替换到Bootstrap网格系统中的新行

vlurs2pr  于 2023-03-20  发布在  Bootstrap
关注(0)|答案(1)|浏览(128)

当我试图内联标签和mother和father元素的链接时,我的页面前端出现了问题。
我尝试使用以下代码:

<div class="row">
  <!-- Start mother and father row -->
  <div class="mb-2 col-lg-6">
    <div class="row">
      <div class="text-md-end text-muted col-md-2 col-lg-4">
        Mother
      </div>
      <div>
        <a *ngIf="horse.mother"
           [routerLink]="['/horses', horse.mother.id, 'detail']"
        >
          {{horse.mother.name}}
        </a>
      </div>
    </div>
  </div>

  <div class="mb-2 col-lg-6">
    <div class="row">
      <div class="text-md-end text-muted col-md-2 col-lg-4">
        Father
      </div>
      <div>
        <a *ngIf="horse.father"
           [routerLink]="['/horses', horse.father.id, 'detail']"
        >
          {{horse.father.name}}
        </a>
      </div>
    </div>
  </div>
  <!-- End mother and father row -->
</div>

My frontend looks like this
我如何内联标签和链接?

rxztt3cl

rxztt3cl1#

div是一个块级元素。块级元素自动显示在一个新行上。因为文本“母亲”在它自己的div中,而变量在另一个div中,所以你得到了换行符。
要修复,请将标签和变量放在同一个div中:

<div class="mb-2 col-lg-6">
    <div class="row">
      <div class="text-md-end text-muted col-md-2 col-lg-4">
        Mother
        <a *ngIf="horse.mother" [routerLink]="['/horses', horse.mother.id, 'detail']">
          {{horse.mother.name}}
        </a>
      </div>
    </div>
  </div>

父亲的部分也一样。

相关问题