Question

在我的目标网页上，我们有一个“媒体资源”部分，其中包含视频，支持材料和社交媒体的链接。目前，当调整窗口大小而不是所需的堆叠结果时，该部分中的内容会缩小。

要清楚，视频，支持和社交应该是堆叠的。该部分的标题非常好。

我已经查看了该部分的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

使用标准引导类tables_prices='''SELECT date, tryprice FROM Price''' df=pd.read_sql_query(tables_prices, conn) x=df['date'] y=df['tryprice']和col-sm-3。

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

＆＃13;

col-sm-6

＆＃13;

.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;
  }
}

＆＃13;

Answer 2

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

Answer 3

如果您希望列堆叠使用col-sm-而不是......

https://www.codeply.com/go/kQHOYSTEnL

<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-sm-3 col-lg-2">
            <img src="//placehold.it/200" alt="videos" class="img-fluid media-icon video" />
        </div>
        <div class="col-sm-6 col-lg-4 text-center">
            <img src="//placehold.it/200" alt="support materials" class="img-fluid" />
        </div>
        <div class="col-sm-3 col-lg-2">
            <img src="//placehold.it/200" alt="social" class="img-fluid media-icon social" />
        </div>
    </div>
</div>

正如您在此处所看到的，.col-是最小的断点，因此它们将继续在宽度上水平缩小。 sm是下一个尺寸，因此它们将变为全宽，并垂直堆叠在576px。如果您希望cols以更宽的宽度堆叠，请使用col-md-，col-lg-或col-xl-等。

Answer 4

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

Bootstrap列缩小而不是堆叠

4 个答案: