如何将文本放在bootstrap中的图像前？

Question

因此，我需要使用Bootstrap将文本定位在图像旁边。它应该看起来像： this

我拥有的代码：

<div id="picture">
        <img src="img/preview.jpg">
    </div>
    
    <div id="description">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br> 
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

Answer 1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-8">
      <img src="https://images.unsplash.com/photo-1656614291920-80ff97b2cf35?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" class="img-fluid">
    </div>
    <div class="col-4">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        <br> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
  </div>
</div>

- 引导程序可在12个网格系统上工作。

• ``Row'包含12个网格。
• 我们可以将所有12个网格与col划分。
  对于您的布局，我将其分为图像的col-8和col-4文本。

<div class="container">
 <div class="row">
   <div class="col-8">
     <img>
   </div>
   <div class="col-4">
     //content
   </div>
 </div>
</div>

Answer 2

尝试这样的事情

<div class="row">

<img class="col-6"  src="">
<p class="col-6">line one <br> line two</p>

</div>

Answer 3

您可以尝试使用Bootstrap的常规布局（12个COLS网格）

<div class="container">
  <div class="row">
    <div class="col-6">
      <img src="" alt="picture"/>
    </div>
    <div class="col-6">
      "content"
    </div>
  </div>
</div>