html - Bootstrap 列收缩而不是堆叠

Question

在我的着陆页上，我们有一个“媒体资源”部分，其中包含指向视频、支持 Material 和社交媒体的链接。目前，该部分中的内容会在调整窗口大小时缩小，而不是堆叠的预期结果。

需要明确的是，视频、支持和社交应该叠加。该部分的标题非常好。

我查看了该部分的 HTML 和 CSS，但似乎无法查明是什么导致它们无法按预期堆叠。以下是正在处理的内容的 HTML 和 CSS。

HTML

<div class="container-fluid no-gutters media-resource-wrapper">
    <div class="row">
        <div class="col-12 col-lg-4 text-center">
            <h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
        </div>
        <div class="col-3 col-lg-2">
            <img src="~/Images/Video.png" alt="videos" class="img-fluid media-icon video" />
        </div>
        <div class="col-6 col-lg-4">
            <img src="~/Images/Materials.png" alt="support materials" class="img-fluid" />
        </div>
        <div class="col-3 col-lg-2">
            <img src="~/Images/Social.png" alt="social" class="img-fluid media-icon social" />
        </div>
    </div>
</div>

CSS

.media-resource-wrapper {
    background-color: #00b9f2;
    padding: 60px 0;
}

    .media-resource-wrapper > .row {
        margin: 0 10px;
    }

    .media-resource-wrapper h2 {
          margin-bottom: 30px;
    color: #fff;
    font-weight: bold;

n-bottom: 30px;
    color: #fff;
    font-weight: bold;
}

/* Media resourse icon positioning */
.media-resource-wrapper .media-icon {
    position: relative;
    top: 20px;
}

@media (min-width: 992px) {

.health-professionals-block .boxheader-landing {
    left: 30px;
    margin-top: 250px;
    width: 20%;
}

.boxheader-landing h1, .boxheader-landing h2 {
    font-size: 1.75em;
}

.boxheader-landing-copy {
    font-size: .9em;
}

.media-resource-wrapper h2 {
    margin-top: 40px;
    border-right: 1px solid #fff;
    padding-right: 30px;
}

.media-resource-wrapper .media-icon {
    top: 30px;
}

.media-resource-wrapper {
    padding: 60px 0 60px 0;
}

更新我做了一个建议的更改，但下面的图片显示了默认情况下的外观以及收缩时的外观。

标准尺寸:

较小的窗口:

Answer 1

使用标准 Bootstrap 类 col-sm-3 和 col-sm-6。

将 URL 替换为您的图像，它将堆叠。

.media-resource-wrapper {
  background-color: #00b9f2;
  padding: 60px 0;
}

.media-resource-wrapper>.row {
  margin: 0 10px;
}

.media-resource-wrapper h2 {
  margin-bottom: 30px;
  color: #fff;
  font-weight: bold;
  n-bottom: 30px;
  color: #fff;
  font-weight: bold;
}


/* Media resourse icon positioning */

.media-resource-wrapper .media-icon {
  position: relative;
  top: 20px;
}

@media (min-width: 992px) {
  .health-professionals-block .boxheader-landing {
    left: 30px;
    margin-top: 250px;
    width: 20%;
  }
  .boxheader-landing h1,
  .boxheader-landing h2 {
    font-size: 1.75em;
  }
  .boxheader-landing-copy {
    font-size: .9em;
  }
  .media-resource-wrapper h2 {
    margin-top: 40px;
    border-right: 1px solid #fff;
    padding-right: 30px;
  }
  .media-resource-wrapper .media-icon {
    top: 30px;
  }
  .media-resource-wrapper {
    padding: 60px 0 60px 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid no-gutters media-resource-wrapper">
  <div class="row">
    <div class="col-sm-12 col-lg-4 text-center">
      <h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
    </div>
    <div class="col-sm-3 col-lg-2">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="videos" class="img-fluid media-icon video" />
    </div>
    <div class="col-sm-6 col-lg-4">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="support materials" class="img-fluid" />
    </div>
    <div class="col-sm-3 col-lg-2">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="social" class="img-fluid media-icon social" />
    </div>
  </div>
</div>