Html 如何使div类具有特定的颜色，同时保持在特定的网格内？

我有一个2-8-2的网格。我希望两边的2个都保持白色，而中间的8个格子变为假灰色。< /P> 我所尝试的：

HTML

我的结果是，在div中，一次只有一个类可以工作。它要么给我整个网格的颜色，要么不给我颜色，这取决于

class=“name”

和

class=“col-sm-8 textleet”

更改的顺序：

进入：

---

如果css和html的其余部分正常，它应该可以工作。

代码的问题是您复制了

类的属性。而不是

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>

.name{
背景颜色：灰色；
}
外面的
内部的
外面的


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

.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>