Bootstrap 整张图片左侧 div

Question

所以我想得到这样的东西（图像在文本的左边）：

注意当你运行这个例子时请用"full page"

打开它

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <div class="container">
    <div class="row">
      <div class="col-1">
        <img src="https://via.placeholder.com/50">
       </div>
      <div class="col-11">
       <h1>some title</h1><p>Some Paragrah</p><p>Other Paragraph</p>
      </div>
    </div>
    </div>

如果您打开这个示例整页，您会注意到图像和其余内容之间有一些空白。我希望右边的图片和文字之间没有边距。

我该怎么做？

我试过向左浮动，但是如果浮动的话，溢出高度的文本会在图像下方，我想将所有文本都放在右边。

期望的输出

Answer 1

既然您使用的是 Bootstrap-4，那么在您的用例中使用 flex 类怎么样...

下面的工作代码段：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="d-flex mb-3">
    <div class="p-2 ">
      <img src="https://via.placeholder.com/50">
    </div>
    <div class="p-2 flex-grow-1 ">
      <h1>some title</h1>
      <p>Some Paragrah</p>
      <p>Other Paragraph</p>
    </div>
  </div>
</div>

Answer 2

我会自己回答，因为我认为我找到了一个更简单的解决方案：只需使用 .no-gutters 删除列之间的任何边距：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <div class="container">
    <div class="row no-gutters">
      <div class="col-1">
        <img src="https://via.placeholder.com/50">
       </div>
      <div class="col-11">
       <h1>some title</h1><p>Some Paragrah</p><p>Other Paragraph</p>
      </div>
    </div>
    </div>

Bootstrap 整张图片左侧 div

Bootstrap image on the left of an entire div

css-float

bootstrap-4

期望的输出