Bootstrap 与自定义 CSS 过渡冲突 - 如何查找 + 修复冲突的 CSS 规则？

Question

我正在尝试将自定义 CSS transition 添加到我现有的基于 Bootstrap 3 的项目中。一个简单的 flex 容器，它包含一个值 input 和一个 select 字段。 jQuery 用于在选择第一个 select 值时将 .hidden 类添加到 input 字段。此类更改 input 字段的 flex-base 属性，该字段应使用转换隐藏。当挑选另一个值时，该字段再次显示。

当我使用一个简单的测试 HTML 文件时，一切正常。但是只要我在标题中添加bootstrap.css 链接，转换就不再起作用了。 select 字段仍然隐藏/显示，但没有过渡。

我怎样才能找出 bootstrap.css 的哪一部分负责并解决这个问题？我已经花了几个小时挖掘引导文件，但到目前为止没有任何成功。

---

从以下示例中的选择字段中选择值 A 以查看问题...

工作小提琴：https://jsfiddle.net/gd03sjtn

使用 Bootstrap（不起作用）：https://jsfiddle.net/gd03sjtn/1

两个 sn-ps 演示它工作/不工作（被引导 css 阻止）

$(function() {
  var $typeSelect = $('#typeSelect');
  var $valueSpinner = $('#valueInput');

  $typeSelect.change(function() {
    if ($typeSelect.val() == "0") {
      $typeSelect.addClass('red');
      $valueSpinner.parent().addClass('hidden');
    } else {
      $typeSelect.removeClass('red');
      $valueSpinner.parent().removeClass('hidden');
    }
  });
});

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.container select {
  flex-grow: 10;
}

.container select.red {
  background: red;
}

.container .spinner {
  flex-grow: 0;
  flex-basis: 30%;
  transition: flex-basis 500ms ease-in-out;
}

.container .spinner.hidden {
  flex-basis: 0%;
}

.container .spinner input.valueInput {
  width: 100%;
}

<!-- Remove Bootstrap.css to make this working -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
  <span class="spinner">
                <input id="valueInput" value="205" class="valueInput">
            </span>

  <select id="typeSelect">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3" selected="selected">D</option>
    <option value="4">E</option>
  </select>
</div>

$(function() {
  var $typeSelect = $('#typeSelect');
  var $valueSpinner = $('#valueInput');

  $typeSelect.change(function() {
    if ($typeSelect.val() == "0") {
      $typeSelect.addClass('red');
      $valueSpinner.parent().addClass('hidden');
    } else {
      $typeSelect.removeClass('red');
      $valueSpinner.parent().removeClass('hidden');
    }
  });
});

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.container select {
  flex-grow: 10;
}

.container select.red {
  background: red;
}

.container .spinner {
  flex-grow: 0;
  flex-basis: 30%;
  transition: flex-basis 500ms ease-in-out;
}

.container .spinner.hidden {
  flex-basis: 0%;
}

.container .spinner input.valueInput {
  width: 100%;
}

<!-- Remove Bootstrap.css to make this working -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
  <span class="spinner">
                <input id="valueInput" value="205" class="valueInput">
            </span>

  <select id="typeSelect">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3" selected="selected">D</option>
    <option value="4">E</option>
  </select>
</div>

Answer 1

问题是您使用的类名与引导程序中的类名相同：

hidden { display: none!important }

所以你的 spinner 弹性面板不会缩小到 flex-basis: 0% - 它会立即完全消失 - 关键的分离是立即的。

---

如何找出 bootstrap.css 的哪个部分负责并解决此问题？

首先，在您自己的 css 中尝试不同的类名 - 我在您的 js+css 中将 hidden 更改为 hiddenx 并且它再次开始正常工作，所以这就是问题所在。

其次，查看开发人员工具 (F12) 的“元素/样式”选项卡/子选项卡，了解发生了什么变化。

另外，部分知道引导程序使用什么样式，知道hidden 做了一些隐藏的东西，所以我知道（在浪费时间查看select 之后）它是引导程序类，这是一个案例确定（在样式选项卡中）它正在添加什么（而不是通过引导 css（不，谢谢））

Answer 2

当您请求获取引导的所有 css 规则时：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

标题中的此链接将合并您的 css 中的所有其他配置...

解决方案：

下载编译好的 bootstrap.min.css 并修改以使用你所需要的！

https://getbootstrap.com/docs/4.1/getting-started/download/

Answer 3

我建议使用 firefox 或 chrome 的开发者工具 (F12)。在“元素”选项卡中（这是 chrome 的措辞——不确定它在 Firefox 中是如何调用的，但你可以在那里找到相同的区域）找到你的元素，css 过渡应该适用于这些元素。单击它，然后在样式区域中查看右侧。您会看到所有适用的样式。具有最高优先级选择器的样式位于顶部。如果您不确定最终在您的 elemente 上使用哪个 css 属性的哪个值，则将 mpve 转到 Computed 选项卡。

在这两个区域中，您都可以看到应用的样式以及它们来自哪个样式表以及来自哪一行。