bootstrap怎么实现上图片下文字

在 Bootstrap 中，可以使用 `media` 类来实现上图片下文字的布局。下面是一个简单的示例：

<div class="media">
  <img src="image.jpg" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    <p>Some text here...</p>
  </div>
</div>

在这个示例中，`media` 类用于创建一个媒体对象，`media-body` 类用于包含文字内容，`mr-3` 类用于设置图片与文字之间的间距。

你可以将 `img` 标签中的 `src` 属性替换为你自己的图片路径，将 `h5` 和 `p` 标签中的文本替换为你自己的内容。

如果你想在一个页面中显示多个上图片下文字的布局，可以使用 `media` 和 `media-body` 类来创建多个媒体对象。

相关问题

bootstrap实现上图片下文字布局

要实现图片下文字的布局，可以借助于 Bootstrap 的 Grid System，具体步骤如下：

1. 在 HTML 中创建一个包含图片和文字的容器，可以使用 Bootstrap 的 `container` 或者 `container-fluid` 类。

2. 在容器内部创建一个行（`row`）。

3. 将图片和文字分别放在行内的不同列（`col`）中，可以使用 `col-sm-*`、`col-md-*`、`col-lg-*` 等类来指定在不同屏幕尺寸下的列宽。

4. 如果需要让图片和文字居中对齐，可以在行内的列中再次创建一个行，并将图片和文字分别放在该行的不同列中。

下面是一个示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row align-items-center">
        <div class="col-md-12">
          <img src="image.jpg" class="img-fluid" alt="Responsive image">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row align-items-center">
        <div class="col-md-12">
          <h3>标题</h3>
          <p>这里是文字内容。</p>
        </div>
      </div>
    </div>
  </div>
</div>

在上述代码中，我们使用了 `align-items-center` 类来让图片和文字垂直居中对齐。此外，使用了 `img-fluid` 类来让图片自适应容器大小。你可以根据实际需求调整代码中的类名和样式。

bootstrap实现右侧图片左侧文字布局

可以使用 Bootstrap 的栅格系统来实现右侧图片左侧文字的布局。具体步骤如下：

1. 使用 `row` 和 `col` 标签创建一行，其中 `col` 标签的宽度分配为 12 栅格中的 9 栅格，即占据左侧 75% 的宽度。

2. 在 `col` 标签内部创建一个 `h2` 标题和一个段落，用于显示文字信息。

3. 在 `col` 标签内部创建一个 `img` 标签，用于显示右侧的图片。将 `img` 标签的宽度设置为 100% ，高度设置为自适应。

4. 可以使用 CSS 样式对文字和图片进行进一步的布局和美化。

示例代码如下：

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <h2>这是一个标题</h2>
      <p>这是一段文字信息</p>
    </div>
    <div class="col-md-3">
      <img src="图片地址" style="width: 100%; height: auto;">
    </div>
  </div>
</div>

注意，这里使用的是 `col-md-9` 和 `col-md-3`，意味着在中等屏幕大小（宽度大于等于 768px）时，左侧的 `col` 标签占据了 9 栅格，右侧的 `col` 标签占据了 3 栅格。如果需要适配不同的屏幕大小，可以使用 `col-sm`、`col-lg` 等不同的类名来设置不同的栅格宽度。