Question

我在这里发现了一个帖子，之前曾问过同样的问题。我实现了那里建议的解决方案，它适用于Chrome和Firefox。但是当我在Safari和Opera上测试它时，我最终得到了一个长水平滚动条。我不确定如何解决它，因为我已经将using overflow-x: hidden添加到正文中。您可以在行动here中看到它。

HTML

<div class="container">
  <div class="level"></div>
  <div class="level purple"></div>
  <div class="level"></div>
</div>

CSS

html, body {
    overflow-x: hidden;
}
.container {
  width:960px;
  margin: 0  auto;
  border:1px solid black;
}
.level {
  height:100px;
  background: #bada55;
}

.purple {
  position: relative;
  background: #663399;
}

.purple:before, 
.purple:after {
  content: "";
  position: absolute;
  background: #663399;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
} 
.purple:before {
  right: 100%; 
}
.purple:after {
  left: 100%;
}

Answer 1

我查看了您分享的链接（www.kampuster.com），发现您的代码存在问题。

<强>问题：在文件all/themes/bootstrap_kampuster/css/style.css中，您为类width: 9999px;和.homeBanner:before, .homeBanner:after提供了.countUpSection:before, .countUpSection:after，这导致了整个问题并且不是正确的方法。

<强>建议：以下是我建议您使用的方法。这是一个pen来更好地说明这个建议。

＆＃13;

.section-first, .section-third {
  background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
  background-attachment: fixed;
  background-size: cover;
}
.section-first-inner {
  background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/*   this is just to add height inplace of content */
  height: 600px;
  color: #ffffff;
  overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
  padding: 20px 20px;
  font-size: 18px;
  height: 100%;
}
.section-second {
  color: #000;
}

＆＃13;

<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML</title>
  </head>
  <body>
    <div class="main-container">
      <header id="page-header"></header>
      <div class="section-first">
        <div class="section-first-inner">
          <div class="container">
            <div class="row">
              <div class="col-sm-12">
                Your content for section first goes here
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-second">
        <div class="section-second-inner">
          <div class="container">
            <div class="row">
              <div class="col-sm-12">
                Your content for section second goes here
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-third">
        <div class="section-third-inner">
          <div class="container">
            <div class="row">
              <div class="col-sm-12">Your content for section third goes here</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 2

而不是在width:960px;尝试设置视图宽度设置container：width: 100vw;

所以容器css将是：

.container {
  width: 100vw;
  margin: 0  auto;
  border:1px solid black;
}

Answer 3

只需使用.container-fluid class。

<div class="container-fluid" style="background-image:url('xample.jpg')">

<div class="row">
    <div class="col-sm-12">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">

                    your content here

                </div>
            </div>
        </div>
    </div>
</div>

Answer 4

Bootstrap容器内的全宽背景!!

如果这是你想要的 (Example Demo)

然后只需使用Relative Lengths：

vw 相对于视口宽度的1％*

vh 相对于视口*高度的1％

我只在代码中替换了2个值：

.container { width:100vw; }
.purple:after { width: 100vw; /* some huge width */ }

代码：

＆＃13;

<!-- Latest compiled and minified CSS -->
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

  <!-- jQuery library -->
  <
  script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script>

  <!-- Latest compiled JavaScript -->
  <
  script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>

＆＃13;

html,
body {
  overflow-x: hidden;
}

.container {
  width: 100vw;
  margin: 0 auto;
  border: 1px solid black;
}

.level {
  height: 100vh;
  background: #bada55;
}

.purple {
  position: relative;
  background: #663399;
}

.purple:before,
.purple:after {
  content: "";
  position: absolute;
  background: #663399;
  /* Match the background */
  top: 0;
  bottom: 0;
  width: 100vw;
  /* some huge width */
}

.purple:before {
  right: 100%;
}

.purple:after {
  left: 100%;
}

＆＃13;

<div class="container">
  <div class="level"></div>
  <div class="level purple"></div>
  <div class="level"></div>
</div>

＆＃13;

Answer 5

请试试这个，这对我有用。

添加以下css，如果不起作用，请尝试添加重要内容。要获得容器的全宽，请将容器流体类添加到特定容器中。

html, body {
    width: -webkit-fill-available;
    overflow-x: hidden;
}

在Safari上的Bootstrap容器内的全宽背景

5 个答案: