Проблема Bootstrap4: правильная структура столбцов внутри и снаружи контейнера - PullRequest
Новая
       91

Проблема Bootstrap4: правильная структура столбцов внутри и снаружи контейнера

1 голос
/ 18 января 2020

Так что я работаю над задачей и не могу найти правильного решения своей проблемы. Я уже сделал дизайн в Photoshop, чтобы показать, что я хочу создать: Photoshop Design .

Итак, я хочу, чтобы основная часть была внутри контейнера (включая: абзац в слева и изображение значка рядом с h1-заголовком [справа] ) -> Все это должно быть внутри адаптивного контейнера .

Мой вопрос: как я могу создать «черный ящик» или «div» на левой стороне рядом с контейнером, не помещая его над контейнером с основным содержимым и оставаясь при этом отзывчивым?

Последние пару дней я боролся с этой проблемой. Я уже попробовал почти все (flex-свойства в bootstrap, col-системы в bootstrap, контейнер внутри контейнера с жидкостью, ...) но не могу найти способ объединить контейнерную жидкость с обычным контейнером ... Если кто-нибудь может мне помочь, это определенно поможет мне! Заранее спасибо!

(ps: я не публикую код, потому что все, что я пробовал, не сработало.) Вот пример того, как я хочу, чтобы div'ы выглядели так: пример изображения

HTML: 

    <div class="container-fluid h-50" id="outerContainer">
  <div class="container h-100" id="innerContainer">
    <div class="row">
      <div class="col">
        <p>
          Bij Lux kom je voor een hele avond. Geniet van een diner tot 6
          gangen en drink de betere wijnen per glas, maar neem je aperitief
          en digestief in onze bar Festiv. Zo ervaar je twee totaal
          verschillende sferen zonder het pand te moeten verlaten en ben je
          even helemaal van de wereld geweest.
        </p>
      </div>
      <div class="col text-center">
        <img src="/images/icons/lightbulb.svg" id="iconScale" class="img-fluid" alt="concept icon" />
      </div>
      <div class="col">
        <h2>
          CONCEPT
        </h2>
      </div>
    </div>
  </div>
</div>

CSS: 

html,
body{
  height: 100%;
}

#innerContainer{
  background-color: black;
}

#outerContainer{
  background-color: black;
}

#iconScale{
  max-width: 100px;
}

h2{
  color: #d8a55d;
  font-size: 4rem;
}

p{
  color: white;
}

1 Ответ

0 голосов
/ 18 января 2020
  • Этого можно добиться разными способами. В каком-то смысле вы можете использовать Pesudo element как :before для этого.
  • Я реализовал эту вещь в codepen, пожалуйста, проверьте эту ссылку: codepen Вы можете прочитать больше об элементах Pesudo по этой ссылке: Pesudo Element 

.container{
    width: 700px;
    margin: auto;
}
.background-outside {
    height: 300px;
    width: 100%;
    outline: thin solid black;
    position: relative;
    background: white;
}

.background-outside::before {
    height: 100%;
    content: ' ';
    position: absolute;
    top: 0;
    bottom:0px;
    width: 100%;
    left: -100%;
    background-color: green;
}
<div class="container">
    <div class="background-outside">

    </div>
</div>
...