Bootstrap：不同列的不同颜色

Question

我有这样的事情：

<div class="container">
  <div id="row">
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
  </div>
</div>

现在我想为不同的尺寸设置不同的背景：

.col-xs-12 {
background-color: blue;
}

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

我怎样才能做到这一点？

Answer 1

您必须使用css媒体查询。

这是bootstrap 3使用的断点 -

因此，您的媒体查询应如下面的代码段所示 -

.column1 {
background-color: yellow;
height:200px;
}
@media (min-width: 768px) { 
.column1 {
background-color: red;
}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
.column1 {
background-color: blue;
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.column1 {
background-color: green;
}}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        

<div class="container">
  <div id="row">
    <div class="column1 col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
    <div class="column2 col-xs-12 col-sm-12 col-md-9 col-lg-9"></div>
  </div>
</div>

Answer 2

我会添加一个额外的类并在其上添加媒体查询，如下所示：

.color-class { /* for col-xs-12 */
  background-color: blue;
}

@media (min-width: 768px) { /* for col-sm-12 */
  .color-class {
    background-color: yellow;
  }
}
 col-lg-9 color-class
@media (min-width: 992px) { /* for col-md-9*/
  .color-class {
    background-color: red;
  }
}

@media (min-width: 1200px) { /* for col-lg-9*/
  .color-class {
    background-color: grey;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div id="row">
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 color-class">sample text</div>
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 color-class">sample text</div>
  </div>
</div>

Answer 3

媒体查询将是您正在寻找的解决方案 -

我们可以为不同的屏幕和设备大小提供不同的CSS代码块。在当今世界，用户可以在各种屏幕上查看网页。屏幕可以是工作站上的大型显示器，飞机上的笔记本电脑，坐在公园里的iPad或其他平板电脑，最后是移动中的小型手机屏幕。

如果您的浏览器支持媒体查询，那么您就可以了。

不同屏幕的不同样式：工作原理

你必须想到要实现这一目标，你必须学习CSS的全新篇章。幸运的是你不必。所需要的只是一些额外的代码行，或者有时只是几个单词。使用媒体查询的最简单方法是在同一样式表文件中包含一段CSS代码。因此，所有特定于移动电话的CSS都将在以下块中定义：

@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
}

通常我们会在文件的末尾定义它，以便利用CSS的级联属性。背景颜色，边框和其他常见属性通常将在上面定义，并且不会在此处更改。以下属性是我们最常替换的属性：

• 身高
• 宽度
• 浮
• 余量

例如，假设该公司的徽标在该网站的桌面版本上宽度为600像素。现在，在宽度为480像素的设备上，滚动条将出现，这是不可取的。所以我们应该有一个较小版本的徽标，CSS文件看起来像这样：

#logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; }
@media only screen and (max-device-width: 480px) {
#logo { background: url(images/logo_mobile.png); width: 440px; }
}

如果您注意到，我们没有覆盖徽标的边框属性，因此边框将继续显示在移动设备上。