Javascript 基本推特引导网格故障_Javascript_Css_Twitter Bootstrap

Javascript 基本推特引导网格故障

javascript css twitter-bootstrap

Javascript 基本推特引导网格故障,javascript,css,twitter-bootstrap,Javascript,Css,Twitter Bootstrap,是我还是col-xs-12在更改窗口大小时很早启动例如，我希望我手机上的div背景是黑色，但桌面上是这种颜色。为什么会这样 /*作为外部资源包含的最新编译和缩小的JavaScript*/ /*作为外部资源包含的最新编译和缩小的CSS*/ /*可选主题*/ @导入url'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'； .col-lg-4{ 背景：红色 } .col-md-4{ 背景：绿色 } .co

是我还是col-xs-12在更改窗口大小时很早启动

例如，我希望我手机上的div背景是黑色，但桌面上是这种颜色。为什么会这样

/*作为外部资源包含的最新编译和缩小的JavaScript*/ /*作为外部资源包含的最新编译和缩小的CSS*/ /*可选主题*/ @导入url'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'； .col-lg-4{ 背景：红色 } .col-md-4{ 背景：绿色 } .col-sm-4{ 背景：蓝色 } .col-xs-12{ 背景：黑色； } 身体{ 利润率：10px； } 版权及副本；您的网站2014

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

这是因为div中的col-lg-4 col-md-4 col-sm-4 col-xs-12拇指和CSS类中的相同类col-xs-12始终应用于您的div，并且因为它是前一个类，所以背景颜色为黑色。您需要的是引导媒体选择器：

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

等。以下是文件：

Upd：增加了为什么它是黑色的解释。

这是因为col-lg-4 col-md-4 col-sm-4 col-xs-12拇指在您的div中出现，并且在CSS类col-xs-12中使用相同的类始终应用于您的div，并且因为它是在最后一个类之前的，所以背景颜色是黑色的。您需要的是引导媒体选择器：

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

等。以下是文件：

Upd：添加了为什么它是黑色的解释。

您的css将始终应用，因为它没有包装在媒体查询中

我已更新您的，以显示一个工作示例：

/* 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;
}

您可以找到标准引导媒体查询大小

/*超小型手机，小于768px/ /没有媒体查询，因为这是引导中的默认设置*/

/*小型设备平板电脑、768px及以上*/ @媒体最小宽度：@screen sm min{…}

/*中型设备台式机，992px及以上*/ @媒体最小宽度：@screen md min{…}

/*大型设备大型台式机，1200像素及以上*/ @媒体最小宽度：@screen lg min{…}