bootstrap 4具有d-flex类的列表项不响应.hide()? [英] bootstrap 4 list items that have d-flex class do not respond to .hide()?

问题描述

当我添加类d-flex时，即使style="display: none;"已添加到DOM中，我的Bootstrap 4 <ul>列表项也不再响应.hide().

When I add class d-flex my Bootstrap 4 <ul> list items do not respond to .hide() anymore, even though style="display: none;" is added to the DOM.

d-flex用于引导4个列表徽章.

建议?

// test 1: regular list, no issue
$("#myList li:even").addClass("disabled").hide()
// <li class="list-group-item" style="display: none;">First item</li>


// test 2: list with badges, no response to hide (class "disabled" still works)
// just adding class "d-flex" is sufficient to reproduce issue
//$("#myList2 li").addClass("d-flex")

$("#myList2 li").addClass("d-flex justify-content-between align-items-center")
$("#myList2 li").append("<span class='badge badge-primary'>test</span>")

$("#myList2 li:even").addClass("disabled").hide()

// <li class="list-group-item d-flex justify-content-between align-items-center" style="display: none;">First item<span class="badge badge-primary">test</span></li>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<h3>regular list</h3>
<ul class="list-group" id="myList">
	<li class="list-group-item">First item</li>
	<li class="list-group-item">Second item</li>
	<li class="list-group-item">Third item</li>
	<li class="list-group-item">Fourth item</li>
</ul>


<h3>with d-flex class (used for badge)</h3>
<ul class="list-group" id="myList2">
	<li class="list-group-item">First item</li>
	<li class="list-group-item">Second item</li>
	<li class="list-group-item">Third item</li>
	<li class="list-group-item">Fourth item</li>
</ul>

推荐答案

.d-flex使用!important替代display: none放置在元素上的display: none.

.d-flex uses !important which overrides the display: none which hide() puts on the element.

您可以将容器放入li中(我在小提琴示例中使用了div)，然后在容器上添加.d-flex，这样li上的display: none不会被覆盖.

You could put containers within your li (I've used divs in example fiddle) and add .d-flex onto them so display: none on the li won't be overridden.

在此处拨弄

这篇关于bootstrap 4具有d-flex类的列表项不响应.hide()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！