Question

我的网站上有一些容器流体div，我一直在Safari中查看该网站。我使用Bootstrap 4，它在我的chrome版本中显示不正确。

这是野生动物园中的容器流体之一： view from safari

以下是Chrome的观点：view from chrome

如何让它在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;
}

Answer 1

您正在使用container类，因此需要使用固定宽度的引导程序用于容器，因此请将其更改为代码如下

改变它

<div class="site">
<div class="container my-5 site-content">

要

<div class="site">
<div class="container-fluid my-5 site-content">

CSS更改

.testimonial {
  background-color: #e6e6e6;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left:0;
  margin-right:0;
}

.testimonial {
  background-color: #e6e6e6;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left:0;
  margin-right:0;
}

.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;
}

<div class="site">
  <div class="container-fluid 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 site-content 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>

Answer 2

解决这个问题的原因是将其添加到我的css中：

.container-fluid {
margin-right: 0;
margin-left: 0;
}

容器流体未在Chrome上正确填充屏幕宽度

2 个答案: