Bootstrap 4 Image Left Text-Right

在Bootstrap 4中，通过使用CSS类可以很容易地实现图像位于左侧，文本位于右侧的布局。您可以在Bootstrap文档中找到这些类，并在您的HTML代码中使用它们。

使用步骤

1. 首先，您需要在HTML文件的标签中添加Bootstrap的CSS和JavaScript链接。可以使用CDN（内容分发网络）来添加它们，也可以下载文件并保存到本地，然后在链接中引用它们。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

2. 在HTML文件中，您需要创建一个容器来放置左右布局的内容。这个容器可以是一个
   标签，也可以是一个其他元素。您可以使用Bootstrap样式来定义这个容器的外观和大小。

<div class="container">
  <!-- content here -->
</div>

3. 在容器内，您需要定义2个部分，即图像和文本。您可以使用标签来插入一张图片，并使用Bootstrap类来对其进行样式设置。另外，您可以使用

   标签来插入一些文本，同样使用Bootstrap类来对其进行样式设置。

<div class="row">
  <div class="col-md-6">
    <img src="your-image.jpg" class="img-fluid rounded" alt="your image">
  </div>
  <div class="col-md-6">
    <p class="text-right">your text here</p>
  </div>
</div>

4. 最后，您需要将左右内容对齐。您可以使用Bootstrap的Grid System类来实现这一点，通过为左侧图像列和右侧文本列设置不同的宽度。

<div class="row">
  <div class="col-md-6">
    <img src="your-image.jpg" class="img-fluid rounded" alt="your image">
  </div>
  <div class="col-md-6">
    <p class="text-right">your text here</p>
  </div>
</div>

完整示例

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="your-image.jpg" class="img-fluid rounded" alt="your image">
    </div>
    <div class="col-md-6">
      <p class="text-right">your text here</p>
    </div>
  </div>
</div>

总结

在Bootstrap 4中，我们可以轻松地创建图像位于左侧，文本位于右侧的布局。仅仅需要几个CSS类就可以实现它。在您的HTML代码中引用Bootstrap的CSS和JavaScript链接，然后使用容器和Bootstrap类来定义左右内容的样式和对齐方式。