Question

我正在使用Bootstrap 4并尝试使用基于卡的布局来显示我的商店。我有一个位置标记，应该来到商店和同一条线上，向右浮动，我想要一个5星评级。（来自font-awesome的图标）但是，每当我使用浮动时：正确的评级就会消失。（我假设在图像下面）

任何人都知道如何解决这个问题？

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

.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 for Bootstrap 4.0

您可以使用Bootstrap float-right类向右拉动范围..

<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类。＆GT; _＆GT;

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

2 个答案: