Bootstrap 4 卡片图片叠加浮动问题

Question

我正在使用 Bootstrap 4 并尝试使用基于卡片的布局来展示我的商店。我有一个位置标记，它应该出现在商店上方并在同一条线上，向右浮动，我想要 5 星评级。（来自 font-awesome 的图标）但是，每当我在收视率上使用 float:right 时，它们就会消失。（我假设在图像下方）

有人知道如何解决这个问题吗？

<div class="card">
    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
    <div class="card-block">
        <div class="stores-card-img-overlay-text">
            <p>
                <i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
                <span class="rating">
                    <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </span>
            </p>
        </div>
        <div class="test-shizzle">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </div>
        <h4 class="card-title">De bakkerij testshop</h4>
        <p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
        <p class="card-search-text">14 appels in gamma!</p>
    </div>
</div>

然后 css 将 .stores-card-img-overlay-text 提升到图像上并浮动 .rating 跨度：

.stores-list .stores-card-img-overlay-text {
    color: #fff;
    margin-top: -50px;
}

.stores-list .stores-card-img-overlay-text .rating {
    float: right;
}

提前致谢！

Answer 1

2018 年更新 Bootstrap 4.0

您可以使用Bootstrap float-right class 将跨度向右拉..

<div class="card">
        <img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
        <div class="card-block">
                    <div class="stores-card-img-overlay-text">
                        <p>
                            <i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
                            <span class="rating float-right">
                                <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
                                <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
                                <i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </span>
                        </p>
                    </div>
                    <div class="test-shizzle">
                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                    </div>
                    <h4 class="card-title">De bakkerij testshop</h4>
                    <p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
                    <p class="card-search-text">14 appels in gamma!</p>
        </div>
</div>

http://codeply.com/go/60n8Prld36

Answer 2

我是个白痴，我没有意识到我可以只使用 Bootstrap 提供的 .card-img-overlay class。 >_>

Bootstrap 4 卡片图片叠加浮动问题

Bootstrap 4 Card image overlay float issue

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4