bootstrap-4

问题 For some reason, my input form loses focus every time I input a character. I type in a character and the cursor would go away and I would have to click on the form again and input another character. My goal is to record the user input for the email address and password, which I have accomplished but the only problem is that I have input a character, click on the form, and input a character again. I would have to repeat this over and over again until I finished inputting my credentials. Can

问题 I am using Bootstrap with jquery to create a dynamic table consisting dropdown menu and button. I want to get value of dropdown menu selected in jquery on button click. Below is my code <table class="table table-bordered"> <tbody> {% for item in items %} <tr> <td> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select </button> <ul class="dropdown-menu" role="menu"

问题 Any tricks for making a div inside any column be able to extend to the right (or left) edge? I need to stick with a fixed container and not a fluid one. Also, because of the CMS, the "extended block" needs to remain in the markup (can't be a CSS pseudo element ). https://codepen.io/mwmd/pen/eLPxOX <div class="container"> <div class="row"> <div class="col-sm-7"> <p>How can I get that div to extend to viewport right while maintaining its left edge to the Bootstrap column?</p> </div> <div class=

问题 Having a modal with id myModal I'm trying to hook up to events when it shows and closes. Following the documentation of https://v4-alpha.getbootstrap.com/components/modal/#events I have added the following to my modal component: this.modalElement = document.getElementById("myModal"); this.modalElement.addEventListener("hidden.bs.modal", this.onModalHidden); this.modalElement.addEventListener("shown.bs.modal", this.onModalShown); The event handlers for now will only console.log "shown" or

问题 I want to display some items next to each other when the window is collapsed in the navbar. Currently, it displays the items in a column like this: Navbar collapsed. I want the image next to the username instead. <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span

问题 I'm using bootstrap 4 and I'm trying to get a bootrap container and its content to go full width and bleed all the way to the view port. My initial solution added padding off the side of the screen which lead to the window scrolling right 15px. My second partial solution is based on this answer for bootstrap 3: Bootstrap container-fluid padding With this approach I get the bleed to the left of the screen, but 30px gap remains on the right. I can't see what I should have done to get the full

问题 This question already has answers here : html form inside bootstrap popover not working (3 answers) Closed 12 months ago . I'm trying to add button to popover but it doesn't seem to render. Is it done like I did or there is a better way. $('#myinput').popover({ trigger : "focus", container : 'body', placement : "bottom", html : true, title : "Choosy Popover", content : `<input></input> Excellent <br><button type="submit">Why no display</button>` }) <script src="https://cdnjs.cloudflare.com

问题 I saw another question like this, but the answer didn't work for me and I'm not sure why. Why isn't my popover content scrolling when over 50px? Also side question: in my variable 'a', my newlines aren't working within the popover. Anyone know why? var a = "hello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello

问题 This is my Code and also dropdown menu is not displaying dropdown items. It does not display dropdown items.Help me with this , that would be very helpful. Also i want to , allow multiple selection of the buttons, that includes, changing the color of each button that i select .list-group-horizontal .list-group-item { display: inline-block; } .list-group-horizontal .list-group-item:focus { display: inline-block; color:#fff; background-color: #41AADA !important; } .list-group-horizontal .list

问题 I'm testing on building a site locally on my machine using bootstrap. I have a <video> sort of as the header of the site. I would like this video to show the full width and height on mobile, and show a cropped/wide version of the video on desktop. I tried using inline media queries in the <source> tags, so that the src would change but nothing would work. So I switched gears and used some javascript to change it that way. So the crazy thing is, it seems my script works. When I look in chrome