整个 div 左侧的引导图像答案

【问题标题】：Bootstrap image on the left of an entire div整个 div 左侧的引导图像
【发布时间】：2020-01-11 23:16:09
【问题描述】：

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

请注意，运行示例时请使用“整页”打开它

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

如果您打开此示例的完整页面，您会注意到图像与其余内容之间存在一些边距。我希望在图片和右侧的文字之间没有边距。

我该怎么做？

我尝试过向左浮动，但是浮动的文字超出了高度，我想把所有的文字都放在右边。

期望的输出

【问题讨论】：

标签： bootstrap-4 css-float

【解决方案1】：

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

工作 sn-p 如下：

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

【讨论】：

感谢阿克伯！还有其他官方方法吗？我的意思是最后只是一个必须在整个 div 左侧的图像
图像通常有img-fluid类，以确保没有重叠...

【解决方案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>

【讨论】：