时间戳

首页 > 解决方案 > 如何使用引导程序为超过 1280 的屏幕尺寸浮动右卡体？

css - 如何使用引导程序为超过 1280 的屏幕尺寸浮动右卡体？

问题描述

使用 Bootstrap 卡，我试图让 card-img 向左浮动，card-body 向右浮动，但浮动类对我不起作用。谁能告诉我我做错了什么？

<div class="container">
        <div class="row row-eq-height">
            <div class="col">

                <div class="card" style="">
                  <img class="card-img-top" style="width: 33%; float: left;" src="img/myimg.jpg" ">
                  <div class="card-img-caption">caption here</div>

                  <div class="card-body float-xl-right">
                    <h5 class="card-title">Title here</h5>
                    <p>By A Person</p>
                    <p class="card-text">When in the course of human events...</p>
                    <a href="#" class="btn btn-primary">Link</a>
                  </div>
                </div>
            </div>

        </div>
</div>

标签： cssbootstrap-4

解决方案

你的xl断点是设置为1280吗？因为如果是，那么您可以flex-xl-row在元素上使用类card并将图像和标题包装在 adiv中，这样它们就可以保持在一起：

<div class="card flex-xl-row">
  <div>
    <img class="card-img-top" src="img/myimg.jpg">
    <div class="card-img-caption">caption here</div>
  </div>

  <div class="card-body">
    <h5 class="card-title">Title here</h5>
    <p>By A Person</p>
    <p class="card-text">When in the course of human events...</p>
    <a href="#" class="btn btn-primary">Link</a>
  </div>
</div>

推荐阅读