Бутстреп-контейнер-жидкость сталкивается с плавающим элементом

Question

У меня есть тело карты с плавающим логотипом и строками внутри контейнерной жидкости

Это прекрасно работает в Chrome, но имеет проблему с намерением в Edge и Firefox

Будет работать сабсолютное позиционирование логотипа, но я бы хотел, чтобы текст обернул вокруг изображения, как это происходит в Chrome

<div class="card-body" style="max-width: 400px">                            
    <span class="rounded logo-container" style="float:right;max-width: 40%;">
       <div style="height: 60px; width: 80px;background: red" alt="Logo" ></div>
    </span>
    <p class="mb-1 font-weight-bold">ASDASDASDASD</p>
    <div class="container-fluid p-0">
      <div class="row">
        <div class="col" style="max-width: 6em">sadfasdf:</div>
        <div class="col">sdfasdf</div>
      </div>
      <div class="row">
        <div class="col" style="max-width: 6em">safdasdfasdf:</div>
        <div class="col">sdfsadfsadfasdf</div>
      </div>
      <div class="row">
        <div class="col" style="max-width: 6em">sadfasdfsa:</div>
        <div class="col">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
      </div>
    </div>
</div>

, пожалуйста, посмотрите на скрипку: https://jsfiddle.net/s2u8y4q0/1/

Answer 1

Попытка добавить строку ниже в части кода CSS может помочь решить проблему отступа.

.row {margin: 0 -1px;}

Модифицированный код:

  <div class="card-body" style="max-width: 400px">                          
    <span class="rounded logo-container" style="float:right;max-width: 40%;">
  <div style="height: 60px; width: 80px;background: red" alt="Logo" ></div>
    </span>



<div class="container-fluid p-0">

<p style="margin:0 13px;"><b>ASDASDASDASD</b></p>

  <div class="row">

    <div class="col" style="max-width: 6em">sadfasdf:</div>
    <div class="col">sdfasdf</div>
    </div>
        <div class="row">
            <div class="col" style="max-width: 6em">safdasdfasdf:</div>
            <div class="col">sdfsadfsadfasdf</div>
    </div>
        <div class="row">
            <div class="col" style="max-width: 6em">sadfasdfsa:</div>
            <div class="col">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
    </div>
  </div>
</div>

Модифицированная ссылка JSFiddle

Выход в Edge:

Вывод в FireFox: