Свойство Bootstrap 4 с плавающей точкой не работает с элементами SVG

Question

Как мне получить svg float:right; и float:left; в следующих codepen ? Я использую float-right и float-left Bootstrap 4 служебных класса . Но это не работает на моих <div> элементах. Я использую D3.js , чтобы создать две гистограммы и расположить их рядом.

Спасибо.

<div class="container">
  <div class="row">
    <div class="col-6" id="barchart"></div>
    <div class="col-6 float-right" id="barchart2"></div>
  </div>
  <div class="row">
    <div class="col-8"></div>
    <div class="col-4"></div>
  </div>
</div>

Answer 1

Вы добавили класс float-right к родительскому элементу, к которому уже применен весь col-6.

Вам необходимо создать дочерний элемент div, применить float-right и добавить свой ids для гистограммы.

<div class="container">
  <div class="row">

    <div class="col-6">
      <div class="float-left" id="barchart"></div>
    </div>

    <div class="col-6">
      <div class="float-right" id="barchart2"></div>
    </div>

  </div>
</div>

Answer 2

Вместо использования float я использовал нечто похожее на то, что предложил Paulie_D.

d-flex justify-content-end