引导程序与自定义 CSS 过渡冲突 - 如何查找 + 修复冲突 css 规则?

Question

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

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

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

---

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

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

摆弄引导程序(不起作用(：https://jsfiddle.net/gd03sjtn/1

两个演示它工作/不工作的片段(被引导 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 }

因此，您的spinnerFlex 面板不会缩小到flex-basis: 0%- 它会立即完全消失 - 关键的分离是立即。

---

如何找出引导程序.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 过渡应该适用于的元素。单击它，然后在样式区域中查看右侧。您会看到所有适用的样式。具有最高优先级选择器的样式位于顶部。如果您不确定最终在元素上使用哪个 css 属性的值，则 mpve 转到"计算"选项卡。

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