Question

在更改窗口大小时，是{I}还是col-xs-12很早就开始了吗？ https://jsfiddle.net/t0o0capo/

例如，我希望移动设备上的div有背景黑色，但桌面上有这种颜色。这是为什么？

/* Latest compiled and minified JavaScript included as External Resource */

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.col-lg-4 {
  background:red
}

.col-md-4 {
  background:green
}

.col-sm-4 {
  background:blue
}

.col-xs-12 {
  background:black;
}

body {
    margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 thumb">
               <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            
            

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb">
               <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            
            

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb">
               <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>
            
        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
        </footer>

    </div>

Answer 1

您需要将CSS规则放在媒体查询中。 col-xs-12类始终存在，因此您的div将始终获得样式。

Answer 2

你的div中出现了“col-lg-4 col-md-4 col-sm-4 col-xs-12 thumb”并在你的CSS中使用相同的类（类col-xs-12总是被应用）到你的div，因为它是前一课 - 那里的颜色是黑色的）。你想要的是Bootstrap媒体选择器：

@media (min-width: @screen-sm-min)
@media (min-width: @screen-lg-min)
@media (min-width: @screen-xs-min)

等。以下是文档：http://getbootstrap.com/css/#grid-media-queries

更新：添加解释为什么它是黑色。

Answer 3

您的css将始终应用，因为它未包含在媒体查询中。

我已更新您的jsfiddle以显示一个有效的示例：

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.col-xs-12 {
  background:black;
}

@media (min-width: 768px) 
{  
    .col-sm-4 {
        background:blue
    }
}

@media (min-width: 992px) 
{ 
   .col-md-4 {
       background:green
   }
}

@media (min-width: 1200px) 
{ 
    .col-lg-4 {
        background:red
    }
}

body {
    margin: 10px;
}

您可以找到标准的引导程序媒体查询大小here

/ *超小型设备（手机，小于768px） /   / 没有媒体查询，因为这是Bootstrap * /
中的默认值
/ *小型设备（平板电脑，768px及以上）* /   @media（min-width：@ screen-sm-min）{...}

/ *中型设备（台式机，992px及以上）* /   @media（min-width：@ screen-md-min）{...}

/ *大型设备（大型台式机，1200px及以上）* /   @media（min-width：@ screen-lg-min）{...}

基本的Twitter Bootstrap网格故障

3 个答案: