Question

对于下面的bootstrap代码，我必须将col-sm-2和col-sm-10硬编码到我的所有表单元素。有没有办法可以避免这个硬编码，并根据以下逻辑使用x-col-sm-left和x-col-sm-right？

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>



<div class="form-group">
        <label for="inputEmail3" class="x-col-sm-left control-label">Email</label>
        <div class="x-col-sm-right">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="x-col-sm-left control-label">Password</label>
        <div class="x-col-sm-right">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>

x-col-sm-left {
 extend col-sm-2 (for example)
}
x-col-sm-right{
 extend col-sm-10 (for example)
}

让我们稍后说我需要将col-sm-2更改为col-sm-3，我应该能够在编辑我的html代码时进行以下更改

x-col-sm-left {
     extend col-sm-3 (for example)
    }
    x-col-sm-right{
     extend col-sm-9 (for example)
    }

Answer 1

我不确定我完全了解你，但我认为这就是你的意思。

所以添加一个类，它只会应用于你将要执行的另一个类

.col-sm-2 .x-col-sm-left {
   /*Style you want here*/
}

所以现在x-col-sm-left可以在col-sm-2中使用了col-sm-2的父级...这将覆盖

.col-sm-2{
  /*Syle*/
}

对于继承，你可以使用,来定义具有相同属性的多个类。但是我所知道的CSS中没有直接inherits // extends。

多重定义的例子：

.col-sm-2, .x-col-sm-left {
       /*Style you want here*/
    }

将一个类的css样式应用到另一个类中

1 个答案: