Css 如何根据屏幕大小设置列数？

我目前正在使用

<div class="col-sm-6 col-xs-12">

在大于xs的所有屏幕上有2列

但是，我想设置断点，当屏幕宽度介于xs和sm之间时，我开始有两列

我应该使用@media query吗？如果是，我该怎么做

这是一个公文包页面，用户可以点击图片查看不同的项目

这是我到目前为止写的：

<section class="container-fluid" id="portfolio">
    <h1>PORTFOLIO</h1>
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>

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

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

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

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

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

文件夹
我

我

我

我

我

我

---

非常感谢您的帮助

试试这样的方法：

@media all and (max-width: 500px) and (min-width: 300px){
    .col-md-6 {
        width: 75% !important;
    }
    .col-xs-12 {
        width: 75% !important;
    }
}

或者创建另一个类，如

。自定义断点

，然后添加它：

@media all and (max-width: 500px) and (min-width: 300px){
    .custom-breakpoint {
        width: 75% !important;
    }
}

---

我不确定这些是否会起作用，但使用媒体查询看起来像这样。

！重要信息

的存在，使其优先于Bootstrap自己的

col-md-6

和

col-xs-12

要将媒体查询添加到CSS中，您可以使用以下方法：

@media only screen and (min-width: 800px) {

    // Your CSS

}

如果要在两个断点之间使用CSS，可以使用：

@media only screen and (min-width: 800px) and (max-width: 1000px) {

    // Your CSS

}

这些都是针对所有设备的，所以您可能需要更具体一点。有大量的信息可以帮助你做到这一点

---

希望这有帮助

在不添加大量CSS规则的情况下，很难覆盖整个

xs

断点。首选方法是创建自定义版本：

当然，请使用LESS来更改断点

@import "bootstrap.less";

/* change lowest tier to 700 instead of 768 */
@screen-sm-min: 700px;

---

如果您想要一个非引导网格提供的断点，则应该使用媒体查询system@CarlJan谢谢我不知道如何将其输入CSS。将列宽设置为75%将使所有内容的大小都变为四分之三，但保持相同的列数（50%=一半大小…等等）。