0
我在我的网站上有一些容器流体div，我一直在Safari浏览器中查看该站点。即时通讯使用Bootstrap 4，它在我的Chrome版本中显示不正确。容器液不能在Chrome上正确填充屏幕宽度
这是Safari中的容器流体之一： view from safari
这里是从Chrome中的观点：view from chrome
我如何让它继续铬屏幕的全宽？
下面是一些HTML
<div class="site">
<div class="container my-5 site-content">
<div class="row">
<div class="col-sm-6">
<div class="carousel slide" data-interval="9000" data-ride="carousel" id="frontpageCarousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"><img alt="Giant_head_brighter_500_x_600" class="d-block img-fluid" src="Images/Front-Slideshow/Giant_head_500_x_500.jpg">
</div>
<div class="carousel-item">
<img alt="final_shot_with_bottle_500_x_600.jpg" class="d-block img-fluid" src="Images/Front-Slideshow/giant_button_500_x_500.jpg">
</div>
<div class="carousel-item">
<img alt="final_shot_with_bottle_500_x_600.jpg" class="d-block img-fluid" src="Images/Front-Slideshow/two_figures_500_x_500.jpg">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h1>We build custom props.</h1>
<p>We utilize a network of the best prop makers in the movie, commercial, trade show, event, advertising, marketing and themed entertainment industries to create amazing props.</p>
<p>We select the best-suited veteran artisans and fabricators for your project — artisans who fabricate for some of the most popular TV shows, the biggest movies and some of the world’s best known companies, like Disney, Universal Studios, NASA, Red Bull, Mazda, JetBlue, Dior and many more.</p>
<p><b>We're great at what we do and we're here to do it for you.</b>
</p>
<div class="text-center">
<a class=" btn btn-primary" href="request-estimate.html" style="margin-top: 15px">Request an Estimate</a>
</div>
</div>
</div>
</div>
<div class="container-fluid testimonial">
<div class="spacer">
</div>
<div class="container my-5">
<p>"Absolutely blown away by your team's work and professionalism. Client thrilled. Great execution. Great teamwork."</p>
<i>- Project Managers, Derse</i>
<p>[Derse is ranked as a Top 10 Experiential/Event Marketing Agency by Advertising Age]</p>
</div>
<div class="spacer">
</div>
</div>
和我的CSS的：
.testimonial {
background-color: #e6e6e6;
margin-top: 50px;
margin-bottom: 50px;
}
.spacer {
height: 30px;
}
div.testimonial {
color: #6f6f6f;
}
div {
font-family: 'Cabin', sans-serif;
}
p {
text-align: justify
}
.nav-link {
color: black !important;
}
.nav-link:hover {
color: #b13034 !important;
}
.container {
max-width: 1080px;
}
h1 {
color: #bf4844
}
p {
font-size: 18px;
}
.btn-danger {
background-color: #bf4844;
}
.footer {
background-color: #15202c;
color: white;
}
.footer h5 {
font-size: 12px;
}
.active {
color: #b13034;
}
h3 {
color: #bf4844;
font-size: x-large;
line-height: 1.3em;
}
.side-testimonial {
color: #6f6f6f;
line-height: 1.5em;
font-size: 18px;
}
.info-header {
background-color: #cccccc;
}
.info-head {
color: #6f6f6f;
font-size: large;
}
a {
color: #b13034;
}
a:hover {
text-decoration: none;
color: #ff5050
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.navbar-toggler-icon {
border-color: white;
}
@media (max-width: 543px) {
.navbar .navbar-brand {
float: none;
}
}
.side-testimonial i {}
/*
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
*/
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.site-content {
flex: 1;
}
虽然我的html中的容器流体部分不在容器内部。 –
我不明白你的意思吗？ – LKG
将该div更改为流体只影响顶部，但实际上并不影响证书部分。如果你跟踪的div块没有封装在你改变的那个。 –