jquery - CSS - 覆盖宽度

Question

我有以下html，软件自动添加第一个css样式g2f0

 <div class="linelevel row">
    <div class="g2f0 col-sm-6 form-group">
       <label for="name">Name</label>
       <input id="name" type="text" value="" name="name">
    </div>
    <div class="g2f1 col-sm-6 form-group">
       <label for="address">Address</label>
       <input id="address" type="text" value="" name="address">
    </div>
</div>

样式是增量自动生成的，并作为每个 div 的第一个类插入，具体取决于页面上的 div 数量:

div.g2f0 {
    float: left;
    width: 50%;
}

div.g2f1 {
    float: left;
    width: 50%;
}

我想摆脱这些自动生成类的宽度属性，以便我可以使用 Bootstrap 网格类。我试过如下使用特异性，但是 Bootstrap 网格类在断点处不起作用:

<div class="linelevel row">
    <div class="g2f0 reset-width col-sm-6 form-group">
       <label for="name">Name</label>
       <input id="name" type="text" value="" name="name">
    </div>
 </div>

.linelevel .reset-width {
    width: auto;
}

我必须执行以下操作才能使其正常工作，这意味着我必须覆盖所有网格类的所有断点:

 @media (max-width: 768px) {
   .col-sm-6 {
      width: 100% !important;
    }
 }

任何人都知道我可以使用 g2f0(这些是自动生成的)和 col-sm-6 之间的单个类来删除宽度的任何其他方法g2f0 类？

Answer 1

问题是您有两个增加宽度的类 - g2f0 和 col-sm-6。您有两个选择 - 删除 g2f0 类的自动添加，或像 Wayne 向您展示的那样设置自定义宽度:

div.g2f0.reset-width {
    width: 200px; /*your custom width*/
}