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上分配的宽度，因此使用网格会在第一个div（col-sm-1）中创建一个空间。您可以在下面直观地看到问题。有什么缓解建议吗？

更新

使用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/

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

2 个答案: