Bootstrap Добавление белого блока перед цветом фона - PullRequest
Новая
       0

Bootstrap Добавление белого блока перед цветом фона

0 голосов
/ 13 февраля 2020

Я пытаюсь использовать bootstrap и сделать сечение похожим на это: Как это должно выглядеть

Проблема, с которой я столкнулся, это белый блок посередине на верхняя часть зеленого фона. Если я добавлю дополнительный класс к внешнему элементу 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/

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

как комментарий. вам нужно добавить это css в .attractionContainer, потому что этот контейнер содержит ваш контент (строку).

, если вы хотите, «как он должен выглядеть». нужно убрать набивку 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;
}
0 голосов
/ 13 февраля 2020

для адаптивного, центрированного поведения на странице, код ниже: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...