Question

我是bootstrap的新手，我正在尝试以下内容。我做了3列，每列有2个段落。使用CSS我为中型屏幕，大尺寸屏幕和超小屏幕定义了配色方案。

最初我看到的颜色是橙色。这只是我预期的颜色。但是，当我将屏幕从大到小重新调整大小时，我看不到任何颜色变化。我无法理解它的原因？我犯的错是什么？

<html>
<head> 
    <title></title>
    <link rel='stylesheet' type='text/css' href='css/bootstrap.css' />
    <style>
        .col-md-4 {
            background-color: yellow;
        }

        .col-xs-4 {
            background-color: red;
        }

        .col-lg-4 {
            background-color: orange;
        }
    </style>
</head>

<body>

    <div class='container'>
        <div class='row'>
            <div class='col-lg-4 col-xs-4 col-md-4'>
                <p> You shout it out, But I can't hear a word you say !</p>
                <p> Beqarar karke humein yun na jaiye..Aapko hamari kasam laut aaiye</p>
            </div>

            <div class='col-lg-4 col-xs-4 col-md-4'>
                <p> I have started liking David Guetta's work !</p>
                <p> I really liked his song 'Titanium' :-)</p>
            </div>

            <div class='col-lg-4 col-xs-4 col-md-4'>
                <p> I am enjoying the saturday afternoon and it is 3:24 by clock.</p>
                <p> How about going for a movie ?</p>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src='js/bootstrap.js' />
</body>

Answer 1

您的规则不使用媒体查询，它们总是被添加，因此最后一个将始终生效。

如果你想修改他们现有的样式，你应该考虑使用带有Bootstrap较少文件的mixins。

当我重新调整屏幕大小时，为什么配色方案没有改变？

1 个答案: