Html 如何使卡片在窗户半开时不拉伸

我的代码的另一个问题是，当我把窗口对半时，我的卡不知怎么地拉长了

这是我的html

<div class="col-lg-6 ml-auto">
                        <section class="blog_w3ls" id="connected">
                            <div class="container">
                            <div class="row">
                                <!-- blog grid -->
                                <div class="col-lg-4 col-md-6 mt-4">
                                    <div class="med-blog">
                                        <div class="blog-header">
                                            <a href="blog1.html">
                                                <img class="img-fluid" src="image/merah.png" alt="image">
                                            </a>
                                        </div>
                                        <div class="blog-body bg-wh p-4">
                                            <a href="blog1.html" class="blog-title">Dictum porta auris magna umgtdd fos</a>
                                            <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                                se.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- //blog grid -->
                                <!-- blog grid -->
                                <div class="col-lg-4 col-md-6 mt-4">
                                    <div class="med-blog">
                                        <div class="blog-header">
                                            <a href="blog2.html">
                                                <img class="img-fluid" src="image/merah.png" alt="image">
                                            </a>
                                        </div>
                                        <div class="blog-body bg-wh p-4">
                                            <a href="blog2.html" class="blog-title">Quis autem vel eum iure reprehdd ende</a>
                                            <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                                se.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- //blog grid -->
                                <!-- blog grid -->
                                <div class="col-lg-4 col-md-6 mt-4">
                                    <div class="med-blog">
                                        <div class="blog-header">
                                            <a href="blog4.html">
                                                <img class="img-fluid" src="image/merah.png" alt="image">
                                            </a>
                                        </div>
                                        <div class="blog-body bg-wh p-4">
                                            <a href="blog4.html" class="blog-title">Suscipit labo iosam nisi ut aliquid</a>
                                            <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                                se.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- //blog grid -->
                            </div>
                        </div>
                        </section>
                    </div>

---

嗯，我只需要使卡片看起来与窗口已满的卡片相同，但我已经尝试使用最小宽度，结果将一切都弄糟了

在调整浏览器窗口大小时，您必须更改字体大小和方框填充。对于固定高度，可以考虑使用“<代码>类＝“H-100”< /COD> < < /P>卡。

a.blog-title{
颜色：橙色；
字体大小：1vw；
文本转换：大写；
显示：内联块；
利润率：12像素0 16像素；
线高：1.4；
文本对齐：居中；
}
.卡体{
填料：1.2vw；
/*使用视图宽度作为字体大小参数*/
}
.卡体p{
字体大小：.9vw；
}
@介质（最大宽度：980px）{
a、 博客标题{
颜色：橙色；
字号：18px；
}
.卡体{
填充：20px；
/*您可以在此处将其更改为移动设备的像素*/
}
.卡体p{
字体大小：14px；
/*您可以在此处将其更改为移动设备的像素*/
}
}

Cras ultricies ligula sed magna dictum portaout auris blandita。维韦拉法雷特拉岛
Cras ultricies ligula sed magna dictum portaout auris blandita。维韦拉法雷特拉岛
Cras ultricies ligula sed magna dictum portaout auris blandita。维韦拉法雷特拉岛

无需使用任何css代码，Bootstrap将帮助您解决问题！ 只要试着粘贴HTML代码

<div class="col-lg-6 ml-auto">
                    <section class="blog_w3ls" id="connected">
                        <div class="container">
                        <div class="row">
                            <!-- blog grid -->
                            <div class="col-xl-4 col-lg-12 col-md-12 col-xs-12 mt-4">
                                <div class="med-blog">
                                    <div class="blog-header">
                                        <a href="blog1.html">
                                            <img class="img-fluid" src="image/merah.png" alt="image">
                                        </a>
                                    </div>
                                    <div class="blog-body bg-wh p-4">
                                        <a href="blog1.html" class="blog-title">Dictum porta auris magna umgtdd fos</a>
                                        <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                            se.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- //blog grid -->
                            <!-- blog grid -->
                            <div class="col-xl-4 col-lg-12 col-md-12 col-xs-12 mt-4">
                                <div class="med-blog">
                                    <div class="blog-header">
                                        <a href="blog2.html">
                                            <img class="img-fluid" src="image/merah.png" alt="image">
                                        </a>
                                    </div>
                                    <div class="blog-body bg-wh p-4">
                                        <a href="blog2.html" class="blog-title">Quis autem vel eum iure reprehdd ende</a>
                                        <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                            se.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- //blog grid -->
                            <!-- blog grid -->
                            <div class="col-xl-4 col-lg-12 col-md-12 col-xs-12 mt-4">
                                <div class="med-blog">
                                    <div class="blog-header">
                                        <a href="blog4.html">
                                            <img class="img-fluid" src="image/merah.png" alt="image">
                                        </a>
                                    </div>
                                    <div class="blog-body bg-wh p-4">
                                        <a href="blog4.html" class="blog-title">Suscipit labo iosam nisi ut aliquid</a>
                                        <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                            se.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- //blog grid -->
                        </div>
                    </div>
                    </section>
                </div>

乌尔里西斯舌苔被称为白兰地之声。无尾蛇
嗯

乌尔里西斯舌苔被称为白兰地之声。无尾蛇
嗯

乌尔里西斯舌苔被称为白兰地之声。无尾蛇
嗯

随着div变薄。。。你必须调整字体的大小，否则它总是又细又高——比如

。博客正文{border:1px纯红；}。博客正文。博客标题{font size:1.5vw！重要；}。博客正文p{font size:1vw！重要；}

谢谢你的回答，现在好多了，不管怎样，有没有一种方法可以使卡片和地图的大小始终保持不变，即使在调整窗口大小时也是如此？我的第一条评论告诉我将字体改为，但这会使我的文本在手机上无法阅读，有没有办法解决这个问题？

<div class="col-lg-6 ml-auto">
                    <section class="blog_w3ls" id="connected">
                        <div class="container">
                        <div class="row">
                            <!-- blog grid -->
                            <div class="col-xl-4 col-lg-12 col-md-12 col-xs-12 mt-4">
                                <div class="med-blog">
                                    <div class="blog-header">
                                        <a href="blog1.html">
                                            <img class="img-fluid" src="image/merah.png" alt="image">
                                        </a>
                                    </div>
                                    <div class="blog-body bg-wh p-4">
                                        <a href="blog1.html" class="blog-title">Dictum porta auris magna umgtdd fos</a>
                                        <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                            se.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- //blog grid -->
                            <!-- blog grid -->
                            <div class="col-xl-4 col-lg-12 col-md-12 col-xs-12 mt-4">
                                <div class="med-blog">
                                    <div class="blog-header">
                                        <a href="blog2.html">
                                            <img class="img-fluid" src="image/merah.png" alt="image">
                                        </a>
                                    </div>
                                    <div class="blog-body bg-wh p-4">
                                        <a href="blog2.html" class="blog-title">Quis autem vel eum iure reprehdd ende</a>
                                        <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                            se.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- //blog grid -->
                            <!-- blog grid -->
                            <div class="col-xl-4 col-lg-12 col-md-12 col-xs-12 mt-4">
                                <div class="med-blog">
                                    <div class="blog-header">
                                        <a href="blog4.html">
                                            <img class="img-fluid" src="image/merah.png" alt="image">
                                        </a>
                                    </div>
                                    <div class="blog-body bg-wh p-4">
                                        <a href="blog4.html" class="blog-title">Suscipit labo iosam nisi ut aliquid</a>
                                        <p>Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra
                                            se.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- //blog grid -->
                        </div>
                    </div>
                    </section>
                </div>