search

Daemonite / material

Material Design for Bootstrap 4
http://daemonite.github.io/material/
MIT License
3.2k stars 725 forks source link

`.card-img` bug: cannot align two column with image #204

Open zhengchun opened 5 years ago

zhengchun commented 5 years ago 
<div class="row no-gutters">
        <div class="col-12 col-md-5 d-flex">
            <a class="d-block overflow-hide" href="/">
                <div class="card">
                    <img  class="card-img img-fluid" src="/ImaginePeace_17124094261168052937_900x540.jpg">
                </div>
            </a>
        </div>
        <div class="col-12 col-md-7 d-flex">
            <div class="row no-gutters">
                <div class="col-6 col-md-4">
                    <a href="/" class="d-flex h-100">
                        <div class="card">
                            <img class="img-fluid card-img h-100" src="/BlackpoolTowerBallroom_714719417607972198_400x240.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-6 col-md-4">
                    <a href="/" class="d-flex h-100">
                        <div class="card">
                            <img class="img-fluid card-img h-100" src="/DriftwoodPirate_15993172467744950522_400x240.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-6 col-md-4">
                    <a href="/" class="d-flex h-100">
                        <div class="card">
                            <img  class="img-fluid card-img h-100" src="/CalidrisCanutus_10022354362427632830_400x240.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-6 col-md-4">
                    <a href="/"  class="d-flex h-100">
                        <div class="card">
                            <img  class="img-fluid card-img h-100" src="/ViewofLiberty_3683339547473353821_400x240.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-6 col-md-4">
                    <a href="/" class="d-flex h-100">
                        <div class="card">
                            <img  class="img-fluid card-img h-100" src="/MonumentFountain_4961822624051255351_400x240.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-6 col-md-4">
                    <a href="/"  class="d-flex h-100">
                        <div class="card">
                            <img  class="img-fluid card-img h-100" src="/Plexus_6357385199072384560_400x240.jpg">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

Expect Result

1

But Current Result

2

Solution

to fix just add width:100% to .card-img .

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scss#L123

.card-img {
width:100%;
}
devwork260802 commented 5 months ago

fix issue #204 by just add h-100 in a class="d-block overflow-hide" href="/"> in first Image div