Bootstrap Columns Scale

2018-06-27 04:10:40

Bootstrap provides a grid layout that divides the screen into columns by %. As far as I know and according to this :

col-lg refers to large desktops col-md refers to desktops col-sm refers to tablets col-xs refers to phones

I am testing the functionality of those classes by this simple program:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style>
        div {
            height: 20px;
        }

        .col-md-3 {
            background-color: black;
        }

        .col-md-6 {
            background-color: yellow;
        }

        .col-sm-2 {
            background-color: green;
        }

        .col-sm-8 {
            background-color: blue;
        }

        .col-xs-1 {
            background-color: violet;
        }

        .col-xs-10 {
            background-color: red;
        }
    </style>
    <title></title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-2 col-xs-1"></div>
            <div class="col-md-6 col-sm-8 col-xs-10"></div>
            <div class="col-md-3 col-sm-2 col-xs-1"></div>
        </div>
    </div>
</body>
</html>

What I expect is that when I decrease the size of the screen the colors should go from black and yellow -> green and blue -> violet and red. But it is always violet and red and if I remove the col-xs it is responding to the next smaller size which is col-sm so green and blue and so on.

Why is this happening any idea? Am I missing any information here?

Your logic is flawed. All those classes exist at all times in the document, so CSS selector specificity applies uniformly regardless of screen size. You need to look into media queries to control styles at various screen breakpoints:

.row > div {
    background: lightgreen;
}
@media (min-width: 768px) {
    .row > div {
        background: pink;
    }
}
@media (min-width: 960px) {
    .row > div {
        background: lightblue;
    }
}
@media (min-width: 1200px) {
    .row > div {
        background: lightyellow;
    }
}

Demo

The breakpoints I've used align with Bootstrap's. You could use custom selectors to apply color to individual columns, also.

链接地址: http://www.djcxy.com/p/75972.html

上一篇: 什么是Bootstrap？

下一篇: Bootstrap列缩放