Question

使用Bootstrap卡，我试图向左浮动card-img，向右浮动card-body，但是float类对我不起作用。有人可以告诉我我在做什么错吗？

<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>

Answer 1

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

<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>

Answer 2

它与显示.card的{{1}}类有关。删除后，我可以向左或向右浮动内容。

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

2 个答案: