bootstrap-4

问题 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. The d-flex is used for the Bootstrap 4 list badges. Suggestions? // 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

问题 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. The d-flex is used for the Bootstrap 4 list badges. Suggestions? // 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

问题 I have tried everything but I can't place checkbox right to the label. I could move the checkbox to the right of label, if it is general type of checkbox. But I could not do the same with custom-checkbox type. <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck" name="example1"> <label class="custom-control-label" for="customCheck">Label</label> </div> 回答1: The custom checkbox is created with pseudo elements so their

问题 i have a bootstrap 4 navbar( like the default navbar which collpase from top to bottom). Now what is want is, i want to convert this navbar into a sidebar for mobile version. i want something like this my code so far: <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top mb-4"> <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='dist/img/web3.svg') }}" alt="Example Navbar 1" class="mr-2" height="30"></a> <a class="navbar-brand"></a> <button class="navbar

问题 i have a bootstrap 4 navbar( like the default navbar which collpase from top to bottom). Now what is want is, i want to convert this navbar into a sidebar for mobile version. i want something like this my code so far: <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top mb-4"> <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='dist/img/web3.svg') }}" alt="Example Navbar 1" class="mr-2" height="30"></a> <a class="navbar-brand"></a> <button class="navbar

问题 in a bootstrap form, the checkbox appears off to the right and the label is to the left. How to center the checkbox under the label? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <form> <div class="form-row"> <div class="form-group col-md-2"> <label for="isNewPrice">New price?</label> <input type="checkbox" class="form-control" id="isNewPrice" > </div> </div> </form> 回答1: Maybe with a text-center class ? <link href="https://maxcdn

问题 Code (Using Bootstrap 4.5): $(".self-first-ul").append('<li class="nav-item">A long sentence here, which does not fit on small screens.</li>'); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="http://localhost/project/">Name</a> <ul class="navbar-nav self-first-ul"> </ul> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="

问题 I use MDB scroll library , and VSCode show warnings : Also define the standard property 'box-shadow' for compatibility How fix it? Or how ignore the warning on VSCode? .scrollbar-black::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #000; } 回答1: .scrollbar-black::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #000; box-shadow: inset 0 0 6px rgba(0, 0,

问题 I'm using bootstrap 4 for my recent project, I need to change multi-level dropdown menu chevron icon rotate on a mobile device only when tapping on parent link, below the code of multi-level dropdown menu, Thanks $(function() { $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) { event.preventDefault(); event.stopPropagation(); //method 2: remove show from all siblings of all your parents $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show")

问题 I'm using bootstrap 4 for my recent project, I need to change multi-level dropdown menu chevron icon rotate on a mobile device only when tapping on parent link, below the code of multi-level dropdown menu, Thanks $(function() { $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) { event.preventDefault(); event.stopPropagation(); //method 2: remove show from all siblings of all your parents $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show")