重命名網格中的CSS代碼

Question

我在從正在處理的網格中重命名某些類時遇到問題。

當前代碼是這樣的：

.col,
   .cols {
    margin-left: 4%; 
  }

  .col:first-child,
  .cols:first-child {
    margin-left: 0; 
  }


  .one.col,
  .one.cols, { 
    width: 4.66666666667%; 
  }

然后html代碼是：

<div class="one col">One</div>
  <div class="eleven cols">Eleven</div>

上面的代碼可以工作，但是我需要更改類名才能工作，因此html代碼如下所示：

 <div class="one-col">One</div>
  <div class="eleven-cols">Eleven</div>

我的問題是...如何更改下面的代碼，以便上面的html起作用？

.col,
   .cols {
    margin-left: 4%; 
  }

  .col:first-child,
  .cols:first-child {
    margin-left: 0; 
  }


  .one.col,
  .one.cols, { 
    width: 4.66666666667%; 
  }

Answer 1

只需調整CSS：

.one-col,.eleven-cols{
    margin-left: 4%; 
}

.one-col:first-child,.eleven-cols:first-child {
    margin-left: 0; 
}


.one-col { 
    width: 4.66666666667%; 
}

.eleven-cols {
    width: 51.3333333334%;
}

Answer 2

我不清楚您為什么只需要一個類，因為我們可以在class屬性中聲明多個類。

但是無論如何。 希望下面的代碼對您有幫助，

.one-col{
    margin-left: 4%; 
    width: 4.66666666667%; 
}
.eleven-cols{
    margin-left: 4%; 
    width: 51.3333333334%;
}
.one-col:first-child,.eleven-cols:first-child{
    margin-left: 0; 
}