Question

使用Bootstrap 4，我正在制作用于分类广告的水平卡，并且希望广告标题的标题在左侧，价格在右侧。使用Django模板：

<section class="card">
        <div class="row no-gutters">
            <div class="col-sm-4">
                <img src="{{ad.thumbnail.url}}" alt="" class="img fluid card-img ad-image-list">
            </div>
            <div class="col-sm-8">
                <div class="card-body">
                    <header class="d-flex justify-content-between">
                        <h6>{{ad.title}}</h6>
                        <h6> {{ad.price}}$ </h6>
                        <hr>
                    </header>
                    <p class="card-text">{{ad.description}}</p>
                </div>
            </div>
        </div>
    </section>

我明白了：

为什么不想申请<header class"d-flex justify-content-between">？

Answer 1

因为您在flex容器中使用了<hr>，并且在右边使用了<hr>。只需移除hr内的header。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<section class="card">
  <div class="row no-gutters">
    <div class="col-sm-4">
      <img src="https://picsum.photos/id/536/354" alt="" class="img fluid card-img ad-image-list">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <header class="d-flex justify-content-between">
          <h6>Title</h6>
          <h6>Price</h6>
        </header>
        <hr>
        <p class="card-text">{{ad.description}}</p>
      </div>
    </div>
  </div>
</section>

Boostrap不想在卡片之间应用正当内容

1 个答案: