Question

当屏幕尺寸小于537px

时，我希望我的div元素显示为单个列

我不想使用col-xs - **，因为断点不在我想要的地方。

我也不想为此使用Less。

这是我的CSS：

@media (max-width: 537px) {
.col-sm-12 {
width: 100%;
}
}

这是我的HTML：

<h1>PORTFOLIO</h1>
    <div>
        <div class="col-sm-4 col-xs-6">
        <img src="#" alt="#" width="100%">
         <p>Me</p>
        </div>

        <div class="col-sm-4 col-xs-6">
            <img src="#" alt="#" width="100%">
         <p>Me</p>
        </div>

        <div class="col-sm-4 col-xs-6">
                <img src="#" alt="#" width="100%">
         <p>Me</p>
        </div>


        <div class="col-sm-4 col-xs-6">
        <img src="#" alt="#" width="100%">
         <p>Me</p>
        </div>

        <div class="col-sm-4 col-xs-6">
            <img src="#" alt="#" width="100%">
         <p>Me</p>
        </div>

        <div class="col-sm-4 col-xs-6">
                <img src="#" alt="#" width="100%">
         <p>Me</p>
        </div>
    </div>

Answer 1

试用此代码

<div class="col-sm-4 col-xs-6 custom-class"></div>

@media (max-width: 537px) {
.custom-class {
width: 100% !important;
max-width:100% !important;
}
}

如何使用媒体断点来设置css中的列数

1 个答案: