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

Question

Я ищу решение в Bootstrap 4, как добиться размещения 3х столбцов в одной строке, где из-за содержимого первого столбца два других столбца будут отображаться параллельно ему.Bootstrap 4 использует Flex для обработки строк и столбцов.Пожалуйста, не предоставляйте решения по расщеплению Col1 в одном контейнере и Col2 и Col3 в другом.Я работаю с различными режимами просмотра и мне нужна гибкость, чтобы отрегулировать положение по ширине столбца.Напримересли Col3 = col-12, следует поместить его ниже Col1 и Col2.

(Просто для информации, в Bootstrap 3 эта функция работала нормально, так как было плавающее и% ширины столбца).Заранее спасибо.

Answer 1

Вы можете использовать простой CSS, чтобы заставить загрузчик 4 работать так, как вам знакомо.Вот пример, который использует float, чтобы получить желаемый результат без размещения столбцов в отдельных контейнерах: http://jsfiddle.net/nyx6e4bf/1/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-3">
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

.container .row {
  display: block;
}

.row>div:nth-of-type(1) {
  background-color: red;
  float: left;
}

.row>div:nth-of-type(2) {
  background-color: blue;
  float: right;
}

.row>div:nth-of-type(3) {
  background-color: green;
  float: right;
}

Ваш CSS должен быть более конкретным, чем мой, если вы не хотите изменить способBootstrap работал по всему сайту.

Я не уверен, что вы действительно сможете достичь того, чего хотите, без изменения CSS.Flex-box на самом деле не предназначен для решения этой проблемы.Вы также можете посмотреть на макеты сетки, так как это может обеспечить решение.