Html 两列的高度和宽度不同（引导）

我目前还不熟悉bootstrap，但仍然在想网格系统，目前面临着两个列的高度不同的问题，有没有办法使其相同

参见图1

还有一个问题是，当我缩小尺寸时，im使其响应，但当我将其缩小到移动尺寸时，第二列确实下降了，但第二列的边框与第一列不匹配。 参见图2

下面是Html代码

<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info" style="height: 200px;">
  <div class="row col-md-6 bg-info" >
      <img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
  </div>
  <div class="ml-5 col-md-6 bg-info">This is the beauty of nature</div>

冰淇淋的历史
这就是大自然的美

---

谢谢，因为您定义了行的高度，所以两列的高度不同

如果要在移动视图中两列显示div，则应使用

col-sm

和

col-xs

冰淇淋的历史
这是自然之美

两列的高度不同，因为您定义了行的高度

如果要在移动视图中两列显示div，则应使用

col-sm

和

col-xs

冰淇淋的历史
这就是自然之美

这就是大自然的美

这就是大自然的美

请同时包含css文件，这样您就可以拥有一个具有特定定义高度的父容器，然后将行和列的高度设置为100%。然后，您的图像可以是具有

对象匹配：cover的背景图像

，或者您可以添加引导类

img fluid

和/或

img responsive

，以使您的图像也具有响应性。嗨，Martin，我删除了行中定义的高度，但如果在移动视图中，如图2所示，当第二列向下移动时，x轴不适合作为第一列请同时包含css文件，这样您可以有一个具有特定定义高度的父容器，然后将行和列的高度设置为100%。然后，您的图像可以是具有

对象匹配：cover的背景图像

，或者您可以添加引导类

img fluid

和/或

img responsive

，以使您的图像也具有响应性。嗨，Martin，我删除了行中定义的高度，但是如果在移动视图中，如图2所示，当第二列向下移动时，x轴不适合作为第一列Hi Mehedi Hasan Siam，移除固定高度后，2列时变为相同，但对于移动视图，我想将其变为1列，第2列将自动向下移动，但目前它确实向下移动，但第2列的x轴边界与第一列不同，显示为第2个picHi Mehedi Hasan Siam，在我移除固定高度后，当2列时，它变得相同，但对于移动视图，我想使它成为1列，第2列将自动向下移动，但目前它确实向下移动，但第2列的x轴边框与第一列不同，如第2张图片所示