两列的高度和宽度不同 (Bootstrap)

Question

我目前是 bootstrap 的新手，仍然对 Grid 系统感到疑惑，目前面临两列高度不同的问题，是否有办法使其相同？

参考图1

还有另一个问题，当我缩小尺寸以使其响应时，但是当我将其缩小到移动尺寸时，第二列确实下降了，但第二列的边框与第一列不匹配。参考图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>

谢谢

Answer 1

两列的高度不一样，因为你定义了行的高度。

如果你让它在移动视图中显示 two-column 中的 div，那么你应该使用 col-sm 以及 col-xs

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info">
  <div class="row col-md-6 col-sm-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 col-sm-6 bg-info">This is the beauty of nature</div>

Answer 2

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <div class="container">
      <div class="row bg-info py-3">
        <div class="col-12 col-md-6">
          <img 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" style="object-fit: cover;" alt="Nature of Mountain">
        </div>
        <div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
      </div>
    </div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row bg-info py-3">
    <div class="col-12 col-md-6">
      <img 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" style="object-fit: cover;" alt="Nature of Mountain">
    </div>
    <div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
  </div>
</div>

两列的高度和宽度不同 (Bootstrap)

The height and width for both column different (Bootstrap)

html

css

twitter-bootstrap-3