如何根据屏幕大小设置列数？ [复制]答案

【问题标题】：How to set the number of columns according to the size of the screen? [duplicate]如何根据屏幕大小设置列数？ [复制]
【发布时间】：2017-03-10 09:31:28
【问题描述】：

我正在使用

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

非常感谢您的帮助！

【问题讨论】：

如果你想要一个 Bootstrap 网格系统没有提供的断点，你应该使用媒体查询
@CarlJan 谢谢。我不知道如何将它输入到 CSS 中。

标签： css twitter-bootstrap media-queries multiple-columns

【解决方案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

【讨论】：

将列宽设置为 75% 会使所有内容的大小变为四分之三，但保持相同的列数（50% = 一半大小......等等）。

【解决方案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 上有大量信息可以帮助您做到这一点。

希望对您有所帮助！

【讨论】：

【解决方案3】：

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

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

使用 LESS 更改断点..

@import "bootstrap.less";

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

【讨论】：