文档似乎没有变化,但为什么宽度在 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
以解决。
我的图像在网格列中。
当我使用 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
以解决。