當我有 col-md 時 col-sm 不起作用

Question

我正在嘗試使用引導程序使一些 html 響應。 在桌面視圖上，引導網格工作得很好，但是當我切換到較小的屏幕時， sm版本沒有響應。 我觀察到，當我將col-sm和col-md一起使用時， col-md在小屏幕上與sm屬性重疊。 請幫忙！

html代碼：

 <div class="container-fluid">
   <div class="row class_1">  
     <div class="col-sm-12 col-md-4">
        <img class="img-class">
     </div>
    <div class="col-sm-6 col-md-4 class_2 ">
        <span>text</span>
        <span>text</span>
    </div>
    <div class=" clas_2 class_3 col-sm-6 col-md-4">
        <span>text</span>
    </div>
</div>

和 css 以防其他類干擾

.class_1{
    color:white;
    padding:20px;

    .img-class{
        width:220px;
        height:auto;
    }

    .class_2{
        text-align:center;
        display: flex;
        justify-content:space-between;
        align-content: flex-end;
        flex-wrap: wrap;
        font-size: 15px;
        flex-direction: row;
        font-family: 'Open Sans', sans-serif;
    }
    .class_3{
        font-size: 19px;
        justify-content:flex-end;
    }   
}

Answer 1

好吧，我想我應該為問題添加解決方案。 感謝@Lalji Tadhani 的有用評論，解決方案是我只是錯過了我的 html 頭上的<meta name="viewport" content="width=device-width, initial-scale=1"> ....:-S

Answer 2

嗨，根據引導程序文檔版本 4.3 進行混合和匹配，您是否嘗試過class="col-6 col-md-4"

請參閱此處的文檔：- https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match

希望這可以幫助

Answer 3

<div class="container-fluid">
        <div class="row class_1">
            <div class="col-6 col-sm-6 col-md-4">
                <img class="img-class">
            </div>
            <div class="col-6 col-sm-6 col-md-4 class_2 ">
                <span>text</span>
                <span>text</span>
            </div>
            <div class="col-6 col-sm-6 col-md-4 clas_2 class_3 ">
                <span>text</span>
            </div>
        </div>
</div>

Answer 4

bootstrap 列沒有問題，只是圖像類無法像嵌套 CSS 那樣獲取類值，只需將其更改如下即可。

.class_1 {
  color: white;
  background-color: #ddd;
}
.img-class {
  width: 220px;
  height: auto;
}
.class_2 {
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-content: flex-end;
  flex-wrap: wrap;
  font-size: 15px;
  flex-direction: row;
  font-family: "Open Sans", sans-serif;
}
.class_3 {
  font-size: 19px;
  justify-content: flex-end;
}