html - 窗户半开时如何使卡片不拉伸

Question

我的代码的另一个问题是，当我将窗口减半时，我的卡以某种方式拉伸。

这是我的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>

这是针对 CSS 的

.blog-body{
    background-color: white;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
}

a.blog-title {
    color: orange;
    font-size: 22px;
    text-transform: uppercase;
    display: inline-block;
    margin: 12px 0 16px;
    line-height: 1.4;
    text-align: center;
}

.blog-body span {
    color: #636363;
    text-transform: uppercase;
    font-size: 12px;
    word-spacing: 3px;
    letter-spacing: 1px;
    display: block;
}

好吧，我只需要使卡片看起来与窗口已满的卡片相同，但我已经尝试使用 min-width 玩，最终搞砸了一切

标签： htmlcssbootstrap-4

Answer 1

在调整浏览器窗口大小时，您必须更改框的字体大小和填充。对于固定高度，您可以考虑使用带有class="h-100".

a.blog-title {
  color: orange;
  font-size: 1vw;
  text-transform: uppercase;
  display: inline-block;
  margin: 12px 0 16px;
  line-height: 1.4;
  text-align: center;
}

.card-body {
  padding: 1.2vw;
  /* using view width as font size parameter */
}

.card-body p {
  font-size: .9vw;
}

@media(max-width: 980px) {
  a.blog-title {
    color: orange;
    font-size: 18px;
  }
  .card-body {
    padding: 20px;
    /* You can change it into pixels here for mobile devices */
  }
  .card-body p {
    font-size: 14px;
    /* You can change it into pixels here for mobile devices */
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-6 ml-auto">
  <section class="blog_w3ls" id="connected">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 mt-4">
          <div class="card h-100">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/250" alt="image">
            <div class="card-body">
              <a href="blog1.html" class="blog-title">Dictum porta auris magna umgtdd fos</a>
              <p class="card-text">Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra se.</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 mt-4">
          <div class="card h-100">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/250" alt="image">
            <div class="card-body">
              <a href="blog1.html" class="blog-title">Quis autem vel eum iure reprehdd ende</a>
              <p class="card-text">Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra se.</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 mt-4">
          <div class="card h-100">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/250" alt="image">
            <div class="card-body">
              <a href="blog1.html" class="blog-title">Suscipit labo iosam nisi ut aliquid</a>
              <p class="card-text">Cras ultricies ligula sed magna dictum portaout auris blandita. Nulla viverra pharetra se.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>