Question

我目前正在使用

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

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

然而，我想设置断点，当屏幕宽度介于xs和sm之间时，我开始有2列。

我应该使用@media查询吗？如果是这样，我该怎么做？

用于投资组合页面，用户可以单击图像查看不同的项目。

这是我到目前为止所写的：

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

非常感谢！

Answer 1

尝试这样的事情：

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

或者创建另一个类，例如.custom-breakpoint，然后添加它：

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

我不确定这些是否可行，但使用媒体查询看起来就像那些。 !important就在那里，因此它优先于Bootstrap自己的col-md-6和col-xs-12

Answer 2

要向CSS添加媒体查询，您可以使用以下内容：

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

    // Your CSS

}

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

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

    // Your CSS

}

这些针对所有设备，因此您可能希望获得更具体的信息。 this CSS Tricks article上有大量信息可以帮助您实现这一目标。

希望这有帮助！

Answer 3

很难覆盖整个xs断点，而无需添加大量CSS规则。首选方法是创建自定义版本：

http://getbootstrap.com/customize/#media-queries-breakpoints

使用LESS来改变断点..

@import "bootstrap.less";

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

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

3 个答案: