Bootstrap 在背景色前添加白色块

Question

我正在尝试使用引导程序并使一个部分看起来像这样：它应该是什么样子

我遇到的问题是绿色背景顶部中间的白色块。 如果我在最外面的 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/

Answer 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; }

Answer 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>

Bootstrap 在背景色前添加白色块

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-02-13 03:40:08

解决方案2
0 2020-02-13 03:57:08

Bootstrap 在背景色前添加白色块

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-02-13 03:40:08

解决方案2 0 2020-02-13 03:57:08

解决方案1
1 已采纳 2020-02-13 03:40:08

解决方案2
0 2020-02-13 03:57:08