-1

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

4

2 回答 2

0

好的，我想通了。
问题是仍然有position: relative;. 这就是为什么当我从原始类中禁用这种样式时，一切都开始正常工作

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

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

解决了这个问题。

于 2017-10-31T09:35:44.323 回答
0

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

更新

如果您使用的是Bootstrap，只需将您的自定义 css 链接放在Bootstrap 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>
于 2017-10-31T07:46:30.523 回答