Использование системы сетки начальной загрузки для быстрого размещения изображения рядом с div

Question

У меня есть следующий html-код для размещения изображения рядом с div, как в комментариях на facebook:

  <div className="row">
      <div className="col-sm-1">
          <img
              className="img-thumbnail"
              src="image.jpg" />
      </div>
      <div className="col-sm-11">
          <div className="bg-light rounded p-1 pl-2">
              <span className="font-weight-bold text-primary">content</span>
              <div>
                  //buttons
              </div>
          </div>
      </div>
  </div>

Однако такое использование сетки создает пробел в первом div (col-sm-1), так какразмер изображения меньше выделенной ширины на div.Вы можете увидеть проблему визуально ниже.Любые предложения по смягчению этого?

ОБНОВЛЕНИЕ

При использовании col-sm-auto всегда естьпространство слева направо из-за col-sm-11, как вы можете видеть на изображении:

Answer 1

Вы можете использовать col-sm-auto вместо col-sm-1, что уменьшит столбец до ширины содержимого (изображения).Также удалите левый или правый отступ в столбцах.

https://www.codeply.com/go/SLirjy4KDw

<div class="container">
    <div class="row">
        <div class="col-sm-auto pr-0">
            <img class="img-thumbnail" src="//placehold.it/40">
        </div>
        <div class="col-sm-11 pl-0">
            <div class="bg-light rounded p-1 pl-2">
                <span class="font-weight-bold text-primary">content</span>
                <div>
                    //buttons
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

Вы можете использовать два div с d-inline в качестве класса. Как эти пространства исчезнут

https://getbootstrap.com/docs/4.3/utilities/display/