将2张图片对齐在同一行Bootstrap [重复]答案

【问题标题】：Align 2 pictures in the same line Bootstrap [duplicate]将2张图片对齐在同一行Bootstrap [重复]
【发布时间】：2021-12-01 02:42:48
【问题描述】：

我正在尝试重新创建此网站：Fister。
但是我的图片无法对齐。

<html>
  <head>
    <meta charset="utf-8">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="icon" href="124010.png">
    <title>FacebookMusic</title>
  </head>
  <body>
<div class="container">

  <div class="row">
 
    <div class="col">
      <img class="img-responsive" src="dF5SId3UHWd.svg">
    </div>

    <div class="col">
      <img class="img-responsive" src="bg.png">
    </div>
 
  </div>
</div>
  </body>
</html>

在这张图片中你可以看到我的结果：

我需要右边那个女孩的照片，

有人能帮我吗？我是初学者。

【问题讨论】：

写col-6而不是col。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

只需在css下方使用

img {
    max-width: 100%;
}

img{
  max-width:100%;
}

<html>
  <head>
    <meta charset="utf-8">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="icon" href="124010.png">
    <title>FacebookMusic</title>
  </head>
  <body>
<div class="container">

  <div class="row">
 
    <div class="col">
      <img class="img-responsive" src="https://i.stack.imgur.com/M9OxW.png" alt="image1">
    </div>

    <div class="col">
      <img class="img-responsive" src="https://i.stack.imgur.com/LgiGe.png" alt="image2">
    </div>
 
  </div>
</div>
  </body>
</html>

【讨论】：

Bootstrap 不需要自定义 CSS，它有自己的图像类 (img-fluid)。您也不希望将 CSS 应用于所有图像元素。
另外，您正在加载 Bootstrap 5，但版本 4 已标记。
@isherwood 是的，但在某些情况下，我们无法在 img 标签中添加类。当它从 WordPress 等后端上传时。所以我认为这是在通用 CSS 中添加它的最佳实践。

【解决方案2】：

将img-fluid 类应用于您的图像以使它们尊重网格。您可能一直在关注 Bootstrap 3 的文档，其中包含您使用的类。

https://getbootstrap.com/docs/4.5/content/images/#responsive-images

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <img class="img-fluid" src="https://i.stack.imgur.com/M9OxW.png" alt="image1">
    </div>

    <div class="col">
      <img class="img-fluid" src="https://i.stack.imgur.com/LgiGe.png" alt="image2">
    </div>
  </div>
</div>

【讨论】：