Контейнер-жидкость и контейнер внутри одного ряда

Question

Как сделать так, чтобы столбец в строке имел «col-6» с «контейнером», а в другом «col-6» - «контейнер-жидкость». Вроде как на картинке. Код, который я пытался сделать, приведен ниже.

HTML

<div class="main">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 c-1">
          <div class="container">
            <div class="row">
              <div class="teste col-sm-12">aaaaa</div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 c-2">
          <div class="fluid-container">
            <div class="row">
              <div class="teste2 col-sm-12">aaa</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

.col-sm-6 {
  height: 700px;
}

.c-1 {
  background: #ccc;
}

.c-2 {
  background: #ddd;
}

.teste {
  background: cyan;
}

.teste2 {
  background: blue;
}

Ниже, как я надеюсь, будет

Answer 1

Я недавно столкнулся с этой проблемой сам. В зависимости от того, на какой версии вы используете Bootstrap (я использовал последнюю Bootstrap 4.4), вы можете посмотреть на то, что я делал в недавнем проекте, здесь: https://www.codeply.com/p/0ZqAg6HUHX

I сместить столбцы, чтобы отобразить столбец справа во всю ширину. Код также отзывчив и ломается в мобильном представлении.

Причина, по которой это работает, заключается в том, что смещенные столбцы будут сдвинуты в одну сторону. Затем добавьте класс p-0 в столбец, и вы получите столбец полной ширины без отступов. Вы можете проверить документацию для получения дополнительной информации по этой части: https://getbootstrap.com/docs/4.4/layout/grid/#offsetting -колонки