Question

类col-md-6销毁我的ng-select下拉动画

当我从浏览器的开发者工具中禁用它时，一切看起来都很好。当我将类col-md-6的样式替换为：

时

.col-md-6 {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

一切正常，但我无法替换所有布局的position: relative;，所以我需要的解决方案可以帮助我删除该样式仅适用于我的选择。我试图将类col-md-6覆盖到另一个双胞胎类但它似乎没有正常工作。当我编辑原始col-md-6课程时，仅。帮我！我添加了几个片段来清楚地表达它。

HTML：

<div class="container">
  <br>
  <br>
  <div class="row">
    <div class="col-md-6 my-broken-select">
      //this select conflict with "Example paragraf" 
      <mdb-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
      <label>Blue select</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
        <p>Example paragraf</p>
    </div>
  </div>
</div>

CSS：

//work!!
.col-md-6 {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
//NOT work!!
.my-broken-select {
    position: static;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
//NOT work!!
 .col-md-6.my-broken-select {
     position: static;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }
//NOT work!!
.my-broken-select {
    position: static!important;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

编辑：

这可能很重要。我的双胞胎课程的风格被分配给我破碎的div但仍然无法正常工作......但是当我从原始col-md-6禁用已经禁用的风格时，它开始工作。

不起作用：

http://prntscr.com/h48fkj

工作：

http://prntscr.com/h48f93

Answer 1

如果不使用!important，您可以轻松覆盖代码以及组织代码，我的意思是如果您在.my-broken-select之后定义.col-md-6它应该正确覆盖它希望这Fiddle解决您的问题。

<强>更新

如果您使用 Bootstrap ，只需在 Bootstrap css链接后添加您的客户css链接，请参阅以下内容以了解：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="Bootstrap.css">
    <link rel="stylesheet" type="text/css" href="yourCustomeStyle.css">
  </head>
  <body>

    <!-- yourContent -->

  </body>
</html>

Answer 2

好的，我明白了。
问题是偷偷摸摸的“示例段落”仍有position: relative;。这就是为什么当我从原始类禁用这种风格时，一切都开始正常工作

当我增加消除position: relative效果的z-index时，解决方案如下所示：

 .my-broken-select {
    z-index: 1500
}

解决了这个问题。

位置：相对;破坏我的选择下拉动画

2 个答案: