Bootstrap 4 Grid не плавающие столбцы?

Question

Я использовал BS 3 в прошлом, но я совершенно новичок в BS 4 & flex;пока не понимаюЯ настроил сетку, как показано в документации, но второй столбец появляется ниже первого, а не справа.

Я попытался настроить свойства экрана для строки, но безуспешно, но не знаю, что еще попробовать

HTML

#hero {
  height: 30em;
  background-color: #373f51;
}

#hero-graphic {
  background-color: #DAA49A;
}

#avatar {
  width: 20%;
}

#intro-text {
  background-color: #DAA49A;
  padding: 1em;
  margin: 1em;
  border-radius: 15px;
}

<div class="container-fluid d-flex align-items-center" id="hero">
  <div class="row " id="hero-row">
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="intro-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="hero-graphic">
      <img src="images/avatar.png" alt="" id="avatar">
    </div>
  </div>
</div>

Нет сообщений об ошибках

Answer 1

Вам не нужно добавлять d-flex, если вы используете класс row, потому что строка уже отстает в display:flex в CSS, я предлагаю вам изучить небольшой гибкий стиль, Bootstrap 4 слишком хорош, даже если вы этого не делаетенаписать дополнительные css для полей и отступов

Не добавляйте поля и отступы в row col-md-*, и есть еще что-то, что вам нужно понять, даже если 1 px дополнительное поле может испортить ваш макет

Answer 2

EDIT: это только решение для flexbox. Я понимаю, что ваш вопрос требует грида, но вы упоминаете о флексе в своем вопросе и плохо его знаете.

проверьте это также: https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf

для флекс вы можете использовать это народитель. Выровняйте его по горизонтали, а не по вертикали, которую вы объясняете.

#parent { display: flex; flex-direction: row; }

вы могли бы использовать это на #hero-row, чтобы получить 2 деления внутри него, чтобы быть рядом друг с другом во flexbox

Answer 3

Я думаю, margin: 1em создает проблему при #intro-text CSS. Кроме того, вы хотите добавить .w-100 в свой .row класс.

<div class="container-fluid d-flex align-items-center" id="hero">
  <div class="row w-100" id="hero-row"> // .w-100 added
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="intro-text">
      ...
    </div>
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="hero-graphic">
      ...
    </div>
  </div>
</div>

Обновленный код CSS:

#intro-text{
  background-color: #DAA49A;
  padding: 1em;
  margin:1em;
  border-radius: 15px;
}

Работающий JSFiddle