时间戳

首页 > 解决方案 > 在页面上以特定像素排列文本

css - 在页面上以特定像素排列文本

问题描述

我有这个 div 并使用引导程序 5。我想要一种情况，当页面 <=1024px 时，我希望在自己的行上有描述和长度。

        <div class="col-3 col-md-4 col-lg-3">
            <div class="card d-flex align-items-center dynamic-card mb-3">
                <div class="card-body">
                    <div class="card-title">@Tester.ProjectName</div>
                    <div class="row">
                        <div class="col">
                            <label>Description</label><br>
                            $@Tester.Amount
                        </div>
                        <div class="col">
                            <label>Length</label><br>
                            @Tester.SquareFeet
                        </div>
                        <div class="col d-flex align-items-center justify-content-end">
                            <div class="icon next-button"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我只是想知道在哪里以及如何写这个。这会是媒体查询吗？它会是什么样子？

标签： cssbootstrap-5

解决方案

您可能想要以下内容

.row {
  display: flex;
  gap: 0.5rem;
}

@media screen and (max-width: 1024px){
  .row {
    flex-direction: column;
  }
}
<div class="row">
    <div class="col">
        <label>Description</label><br>
        $@Tester.Amount
    </div>
    <div class="col">
        <label>Length</label><br>
        @Tester.SquareFeet
    </div>
    <div class="col d-flex align-items-center justify-content-end">
        <div class="icon next-button"></div>
    </div>
</div>

推荐阅读