Question

我正在尝试将图像放置在文本的左侧，然后将其包裹起来，类似于我附加的第一个图像layout I am trying to create

由于某种原因，图像与它下面的文本位于同一列，或者看起来像我附加的第二张图像。 the way it looks now我正在学习引导程序4，因此某些元素上的某些定位无法正常工作。很抱歉，我ctl + k不能正确放置代码，但无法正常工作。

有人可以帮我解决这个问题吗？

  <div class="col-lg-12">
    <hr>
  </div>
</div>
<div class="row">
    <div class="col-12 col-lg-2">
        <img src="http://placehold.it/150x150" alt="" class="img-responsive float-left mr-3">
    </div>
    <div class="col-lg-10">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
          ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
          anim id est
          laborum. be repudiated and annoyances accepted. The wise man therefore always holds in these matters
          to this
          principle of
          selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid
          worse
          pains."</p>
      </div>

      <div class="col-lg-10">
        <p>
          "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and
          demoralized by
          the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and
          trouble that
          are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of
          will, which is
          the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy
          to
          distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our
          being able
          to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain
          circumstances
          and owing to the claims of duty or the obligations of business it will frequently occur that
          pleasures have to
          be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this
          principle of
          selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid
          worse
          pains."
        </p>
        <p>
          3rd paragraph here. Get to talking
        </p>
      </div>


</div>`

Answer 1

如果您查看大列，则它是col-lg-2（共12个），而不是第一段col-lg-10（它将图像和文本结合在一起）12，这意味着您的总宽度页面，现在下面的页面只有10个，因此它将显示页面的83.33％，请尝试更改col-lg-12的页面，使其与img +第一段匹配。 Take a look

这很简单，您可以使用它...

<div class="col-lg-2">
        <img src="http://placehold.it/150x150" alt="" class="img-responsive float-left mr-3">
</div>

<div class="col-lg-10">
        <p>Paragraph1</p>
</div>
<div class="col-lg-10">
        <p>Paragraph2</p>
</div>

如何使用Bootstrap 4使图像正确环绕文本？

1 个答案: