bootstrap-4

问题 I am trying to design a webpage with an input table where users can add or remove rows as they want. UI like this- And here is my html code: <div class="container my-5"> <h2>Welcome to dynamic input table with row adding option</h2> <form method="" action=""> <table class="table table-hover my-5"> <thead class=""> <tr> <th>No</th> <th>Name</th> <th>Pnone Number</th> <th>Email</th> <th>Remove?</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text" name="name-1"></td> <td><input

问题 I have the following html to build a grid with bootstrap 4. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="row"> <div class="col-sm-12 col-md-3"> <div class="row"> <div class="col-lg-12"> here are different heights possible </div> </div> <div class="row align-items-end"> <div class="col-lg-12 date"> should always be at

问题 I want to show the selected checkbox's text inside the button, right now when i select something from the checkbox it only shows the text "Multiple Selection ▼" <div class="dropdown show"> <button style="border-radius: 10px; border-width: 2px; border-color: #fcb141" type="button" class="form-control" data-toggle="dropdown">Multiple Selection ▼</button> <ul class="dropdown-menu checkbox-menu allow-focus"> <li><a style="color: black;" href="#" class="large" data-value="Chinese" tabIndex="-1">

问题 I want to show the selected checkbox's text inside the button, right now when i select something from the checkbox it only shows the text "Multiple Selection ▼" <div class="dropdown show"> <button style="border-radius: 10px; border-width: 2px; border-color: #fcb141" type="button" class="form-control" data-toggle="dropdown">Multiple Selection ▼</button> <ul class="dropdown-menu checkbox-menu allow-focus"> <li><a style="color: black;" href="#" class="large" data-value="Chinese" tabIndex="-1">

问题 I've read previous threads that cover this issue for navbars and menus but it does not seem to apply. I have a very simple example: two cards, one opened by default the other collapsed. When I try to expand the second card by pressing Card 2 Button, it opens but then immediately closes again. I am not sure what I'm doing wrong. Thanks in advance for any help. Example here: <div id="accordion"> <div class="card"> <div class="card-header" id="header1"> <h5 class="mb-0"> <button class="btn btn

问题 Having issues compiling some bootstrap 4 modules (updating from beta3). While the issue can be solved by setting @charset: 'UTF-8'; on _hover.scss mixin partial (which is noted as deprecated within the file), why would that be needed considering it should compile out of the box as previous beta versions. Code in _hover.scss : @mixin hover { &:hover { @content; } } @mixin hover-focus { &:hover, &:focus { @content; } } @mixin plain-hover-focus { &, &:hover, &:focus { @content; } } @mixin hover

问题 Bootstrap class dropdown-menu can autodetect the viewport of the screen and adapt accordingly So if there is no room for the dropdown to open to the bottom it opens up, as shown by the example bellow However it doesn't happen for the horizontal limits of the viewport, and I end up getting this horizontal scroll, here's an example of this happening: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs

问题 I have the following code <% include partials/header %> <div class="container"> <header class="jumbotron"> <div class="container"> <h1>Welcome to YelpCamp!</h1> <p>View our handpicked campgrounds from all over the world!</p> <p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p> </div> </header> <div class="row text-center" > <% campgrounds.forEach(function(campground){ %> <div class="col-lg-3 col-md-4 col-xs-6 img-thumbnail p-0 "> <img class="img-fluid" src=

问题 I am designing a site using Bootstrap 4. Most of the content lives in regular (fixed width) containers; however there are some images that should be full width (edge to edge), so for these I use .container-fluid . In one specific page I have a layout that looks like this (for large resolutions): The images are full width while the text is not, so my first thought was to put the images in a .container-fluid and the text in a regular .container , like this: <div class="container-fluid"> <div

问题 I've implemented a bootstrap carousel with thumbnails on my website but the thumbnail size is off, they are way too small. I fiddled some with the CSS code within the foto_new page. But my knowledge of CSS is not enough to get this working. Here is my page code: <head> <title>Reis Foto"s</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/lo.css"> <link rel="stylesheet" href="css/boots.css" crossorigin="anonymous