Html 使用引导网格系统将映像响应地放置在div旁边

我使用以下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上分配的宽度，使用网格在第一个div（

col-sm-1

）中创建了一个空间。您可以在下面直观地看到问题。有什么建议可以缓解这种情况吗

更新

使用

col-sm-auto

时，由于

col-sm-11

的原因，从右侧总是有一个空格，如图所示：

---

您可以使用双div和d-inline作为类。因为这些空间将消失

---

您可以使用

col-sm-auto

而不是

col-sm-1

，这会将列缩小到内容（图像）的宽度。同时删除列上的左侧或右侧填充

内容
//钮扣

谢谢你的回答。这几乎是完美的。由于

col-sm-11

没有占据所有宽度，因此这种方法只在右侧留下一些空间。请查看OP中的更新。然后只需将

col-sm-11

更改为

col-sm

<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>