Question

我正在尝试使用Bootstrap使一些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

根据Bootstraps文档4.3版，您好，您是否尝试过class="col-6 col-md-4"

来进行混合和匹配？

在此处查看文档：-https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match

希望这会有所帮助

Answer 2

<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 3

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

Answer 4

好吧，我认为我应该将解决方案添加到该问题中。感谢@Lalji Tadhani的有帮助的评论，该解决方案是我只是错过了html头上的<meta name="viewport" content="width=device-width, initial-scale=1">。...：-S

我有col-md时col-sm不起作用

4 个答案: