Canh 2 cột có height bằng nhau với bootstrap 4

#1

cho mình hỏi có cách nào để canh cho 2 cột này bằng nhau không nhỉ, bạn nào biết thì giúp mình với.

<div class="row h-100">
    <div class="col-8 h-100">
        <div class="row">
            <div class="col-6 p-1">
                    <div class="card">
                        <img src="n1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col-6 p-1">
                <div class="card">
                    <img src="n5.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col-6 p-1">
                <div class="card">
                    <img src="n3.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col-6 p-1">
                <div class="card">
                    <img src="n6.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-4 h-100">
        <div class="row">
            <div class="col-12 p-1">
                <div class="card">
                    <img src="4.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto recusandae vitae sapiente
                         ipsum porro est, facilis corrupti adipisci consequatur dolor quia, repellendus harum, 
                         accusantium ullam inventore ratione hic molestias rerum?
                    </p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

image
image1165×961 466 KB

1 Like
#2

à mình biết cách rồi nhé bạn nào chưa biết thì có thể hỏi mình bày cho

#3

Đưa giải pháp lên luôn đi bạn, sau này có khi có người họ cần thì sao.

5 Likes
#4 
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

thêm đoạn code trên vào file css của bạn. sau đó bạn thêm class row-eq-height vào div row chứa 2 col mà bạn muốn có có cùng height

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

lúc này thì 2 div col trong 1 row đã cũng height

<div class="row row-eq-height">
    <div class="col-lg-8 col-12">
        <div class="row">
            <div class="col-6 p-1 d-lg-block h-50">
                    <div class="card">
                        <img src="n1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col-6 p-1 d-lg-block h-50">
                <div class="card">
                    <img src="n5.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col-6 p-1 d-lg-block d-none h-50">
                <div class="card">
                    <img src="n3.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
            <div class="col-6 p-1 d-lg-block d-none h-50">
                <div class="card">
                    <img src="n6.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                    <div class="card-footer">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 d-lg-block d-none">
        <div class="row h-100">
            <div class="col-12 p-1 h-100">
                <div class="card h-100">
                    <img src="4.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto recusandae vitae sapiente
                         ipsum porro est, facilis corrupti adipisci consequatur dolor quia, repellendus harum, 
                         accusantium ullam inventore ratione hic molestias rerum?
                    </p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

image
image403×839 193 KB

4 Likes
#5

@Pham_Dat1 thanks bạn nhiều, đúng cái mình đang cần

1 Like
#6

layout của bạn không reponsive bạn ơi, thu nhỏ cửa sổ bị mất 1 số card ák

#7

không phải đâu bạn , nó mất vì mình muốn nó mất mình muốn khi vào màng hình mobile nó phải mất 1 số card

<div class="col-6 p-1 d-lg-block d-none h-50">

d-none là display none là vốn dĩ nó mất ngay từ đầu d-lg-block tức là khi màng hình ở màng hình rộng large thì nó là display block nó lại hiện ra

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?