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%;
}

我想摆脱这些自动生成的类的宽度属性，以便我可以使用引导网格类。我尝试使用如下特性，但是后续网格类在断点处不起作用：

<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*/
}

Answer 2

检查CSS文件的顺序。您需要在包含.g2f0类的文件之后导入bootstrap css文件。

如果你不能编辑订单，丑陋的解决方案就是编辑booststrap sass / css并添加！important对那些withds（.col-xx-xx）或覆盖它们（.col-xx-xx ）在一个新的其他导入文件中。但要小心。

Answer 3

如果您使用的是Firefox，只需右键单击页面并使用inspect元素即可。在找到你的div之后，看看哪个样式表造成了麻烦，转到样式表行并删除导致问题的宽度。

或者您可以使用内联样式表设置引导程序的宽度，如下所示，它将覆盖所有外部样式表

<div class="g2f0 reset-width col-sm-6 form-group" style="width:...%;height:...%">
   <label for="name">Name</label>
   <input id="name" type="text" value="" name="name">
</div>

Answer 4

您想要利用的是CSS特异性。

如果两个选择器适用于同一个元素，那么具有更高特异性的元素将获胜。

你的分歧有多个类，div.g2f0只算作一个类......

div.g2f0.reset-width {
    width: auto;
}

计算两个班级。它具有更高的特异性，因此获胜。

特异性计算器https://specificity.keegan.st/

另一个例子

div.g2f0.reset-width.col-sm-6 {
    width:500px;
}
div.g2f0.reset-width {
    width: auto;
}

现在第一个CSS有3个类用于指定g2f0除法，后面的有2个类。具有最多指定的CSS规则表示将使用的宽度为500px。无论订单如何。

...您可以仔细订购CSS规则，如果特异性相同，则使用最后应用的规则。但是，这样做的缺点是，当你在6个月内回到页面时，找到正在使用的CSS规则并不容易。未来的错误更有可能发生，需要花费大量时间才能找到。

正确使用特异性时，浏览器中的inspect元素工具会告诉您正在使用哪个CSS规则。

另一种方法是使用ID属性

ID比CSS规则的类更具体

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

div#reset-width {
   width:auto
}

基于更新的选择器......

div.form-group:first-child {
    width: auto;
}

添加css3伪选择器first-child使其更具特异性。

Jquery也支持CSS4 伪选择器“has”... jquery

$( "div" ).has( #name ).css( "width", "auto" );

将设置带有ID的div的css，其值为name ... to width：auto

Answer 5

如果允许使用jquery，请删除这些动态类。

＆＃13;

$(document).ready(function() {
  $('div[class^="g2f"]').removeClass(function(index, className) {
    return (className.match(/\g2f\S+/g) || []).join(' ');
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="g2f0 reset-width col-sm-6 form-group">
  <label for="name">Name</label>
  <input id="name" type="text" value="" name="name">
</div>

＆＃13;

Answer 6

div.g2f0.reset-width{width: auto !important;}

CSS - 覆盖宽度

6 个答案: