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塊沒有封裝在你改變的那個。 –