如何使 div 类具有某种颜色，同时保持在某些网格内？答案

【问题标题】：How can i make a div class a certain color, while staying within certain grids?如何使 div 类具有某种颜色，同时保持在某些网格内？
【发布时间】：2015-12-04 05:24:19
【问题描述】：

我有一个 2-8-2 网格。我希望两边的 2 保持白色，而中间的 8 网格变为虚灰色。

我尝试过的：

HTML

<div class = "name"  class="col-sm-8 text-left">

</div>

CSS

.name{
  background-color: #gray; (or any other color) 
}

我的结果是，在 div 中，一次只有一个类可以工作。根据class="name" 和class="col-sm-8 textleft" 的顺序，它要么给我整个网格的颜色，要么不给我颜色

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

改变： <div class = "name" class="col-sm-8 text-left" >

进入： <div class = "name col-sm-8 text-left" >

如果 css 和 html 的其余部分没问题，它应该可以工作。

【讨论】：

【解决方案2】：

您的代码的问题在于您复制了class 属性。而不是

class="name" class="col-sm-8 text-left"

改成

class="col-sm-8 text-left name"

它只允许在 HTML 元素上使用一个 class 属性，这意味着如果存在两个，则将忽略一个；这就是您看到订购问题的原因。

最终代码如下所示：

.name {
  background-color: grey;
}

<div class="container">
  <div class="row">
    <div class="col-xs-2 text-center">
      Outer
    </div>
    <div class="col-xs-8 text-center name">
      Inner
    </div>
    <div class="col-xs-2 text-center">
      Outer
    </div>
  </div>
</div>

Bootply Example

【讨论】：