文档似乎没有变化,但为什么宽度在 Bootstrap 4 和 5 之间给出不同的图像比例?

It seems to be no change in docs, but why does width give different image scale between Bootstrap 4 and 5?

我的图像在网格列中。 当我使用 Bootstrap 4 时,.title-image { width: 60%;} 按预期工作。

然而,当切换到 BS 5 时,它只是弹出并放大。就像 width 设置为对应于主体宽度,而不是图像列容器了。

Bootstrap 4.5 和 5 的文档表明它们都使用 .img-fluid. max-width: 100%; and height: auto;)

处理图像

来源:

v5: https://getbootstrap.com/docs/4.5/content/images/

v4.5: https://getbootstrap.com/docs/5.0/content/images/

规格相同,但为什么 width: 60%; 表现不同?

CSS

.title-image {
  width: 60%;  /* this has different image display
                  between Bootstrap 4 and Bootstrap 5. Why? */
  transform: rotate(25deg);
  position: absolute;
  right: 23%;
}

#features {
  background-color: #fff;
  padding: 7% 15%;
  position: relative;
}

/* below is just decoration */
#title {
  background-color: #ff4c68;
  color: #fff;
  text-align: left;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1.5;
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.5;
}

h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}

p {
  color: #8f8f8f;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.container-fluid {
  padding: 3% 15%;
}

.navbar {
  padding-bottom: 2.5rem;
}

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.nav-link {
  font-family: "Montserrat";
  font-weight: 300;
  font-size: 1.2rem;
}

.download-button {
  margin: 3%;
}

HTML

 <section id="title">
    <div class="container-fluid">

      <!-- Nav Bar -->

      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">tindog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>

      <!-- Title -->
      <div class="row">
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>

        <div class="col-lg-6">
          <img class="title-image" src="https://i.ibb.co/yFBgCTG/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
      
  </div>
</section>

  <!-- Features -->

  <section id="features">
    <div class="container-fluid">
      <div class="row">
        <div class="grid-align-center col-lg-4">
          <i class="fas fa-check-circle"></i>
          <h3>Easy to use.</h3>
          <p>So easy to use, even your dog could do it.</p>
        </div>
        <div class="grid-align-center col-lg-4">
          <i class="fas fa-bullseye"></i>
          <h3>Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>
        </div>
        <div class="grid-align-center col-lg-4">
          <i class="fas fa-heart grid-align-center"></i>
          <h3>Guaranteed to work.</h3>
          <p>Find the love of your dog's life or your money back.</p>
        </div>
      </div>
    </div>
  </section>

供您参考(您可以在codeply设置图标中将Bootstrap fw更改为4和5):https://www.codeply.com/p/0PxYAi3JWt

区别在于 Bootstrap4 和 Bootstrap5 .col-lg-6 -- position: relative 在 Bootstrap5 中删除了所有列选择器,而 Bootstrap4 确实使用它。

您的 css .title-image { position: absolute; } 依赖于具有 position: relative 的父元素才能按预期工作。我不确定为什么要在 4 和 5 之间进行更改,但是您可以将父 div 更新为 col-lg-6 position-relative 以解决。