Bootstrap 在背景颜色前添加白色块答案

【问题标题】：Bootstrap Adding white block in front of background colorBootstrap 在背景颜色前添加白色块
【发布时间】：2020-02-13 11:57:08
【问题描述】：

我正在尝试使用引导程序并使部分看起来像这样：What it's supposed to look like

我遇到的问题是绿色背景顶部中间的白色块。如果我向最外层的 div（填充）添加一个额外的类，则不会显示任何内容，但如果我将它添加到任何其他 div，它只包含照片（抱歉，没有）和文本，而不是 100% 的填充高度.我试过 z-index: 999，宽度为 80%，高度为 100%，但它有点搞砸了背景。

我不知道该怎么办。任何帮助，将不胜感激。谢谢。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <link href="index.css" rel="stylesheet"/>
    </head>
    <body>
    <div class="padding attractionPad">
        <div class="container attractionContainer">
            <div class="row">
                <div class="col-sm-6">
                    <img src ="img2.png">
                </div>
                <div class="col-sm-6">
                    <ul class="attraction">
                        <li><h3>Ninja Course</h3></li>
                        <li><h3>Indoor Bounce Arena</h3></li>
                        <li><h3>Mechanical Wipeout Challenge</h3></li>
                        <li><h3>Ziplining Fun</h3></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

CSS：

html,body{
    background-color: #EE870D;
    width:100%;
    height:100%;
}
.padding{
    padding: 80px 0;
}
.padding img{
    width:100%;
}
.attractionPad{
    background-color: #8FBA51;
}
.attraction{
    color:blue;
    list-style:none;
}
.events li, .attraction li{
    margin: 10px 0 50px 0;
}

https://jsfiddle.net/4agbp8tf/2/

【问题讨论】：

.attractionContainer{ background: #fff } 有帮助吗？
我试过了，但它所做的只是有点填充图片+文字。它永远不会达到背景高度的 100%。

标签： html css bootstrap-4

【解决方案1】：

作为评论。您需要在 .attractionContainer 上添加此 css，因为此容器包含您的内容（行）。

如果你想要“它应该是什么样子”。您需要删除填充 css

html,body{
	background-color: #EE870D;
	width:100%;
	height:100%;
}
.padding{
	padding: 0px ;
}
/* remove class or this css */
.padding img{
	width:100%;
}
.attractionPad{
	background-color: #8FBA51;
}
.attraction{
	color:blue;
	list-style:none;
}
.events li, .attraction li{
	margin: 10px 0 50px 0;
}
.attractionContainer{
  background-color: #fff;
}

【讨论】：

天哪。我没看到。非常感谢！

【解决方案2】：

对于全页响应、居中的行为，下面的代码：

html,
body {
  background-color: #EE870D;
  width: 100%;
  height: 100%;
}

.padding {
  padding: 80px 0;
}

.padding img {
  width: 100%;
}

.attractionPad {
  background-color: #8FBA51;
}

.attraction {
  color: blue;
  list-style: none;
}

.events li,
.attraction li {
  margin: 10px 0 50px 0;
}

.attractionContainer {
  background: #fff;
  height: 100vh;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class=" attractionPad">
  <div class="container attractionContainer d-flex">
    <div class="row align-self-center">
      <div class="col-sm-6 ">
        <img class="img-fluid" src="https://www.akberiqbal.com/Jumbo.jpg">
      </div>
      <div class="col-sm-6">
        <ul class="attraction">
          <li>
            <h3>Ninja Course</h3>
          </li>
          <li>
            <h3>Indoor Bounce Arena</h3>
          </li>
          <li>
            <h3>Mechanical Wipeout Challenge</h3>
          </li>
          <li>
            <h3>Ziplining Fun</h3>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

【讨论】：