自舉列縮小而不是堆疊

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

}

UPDATE我進行了建議的更改，但下圖顯示了默認情況下的外觀以及收縮時的外觀。

標准尺寸：

較小的窗口：

Answer 1

使用標准的引導類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> 

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>