引导卡堆叠效果
[英]Bootstrap Cards Stacking Effect
问题描述
I'm trying to make TV Show Searcher based on an API.
我正在尝试基于 API 制作电视节目搜索器。 The functionality is all done but i wonder if u can help me make those Bootstrap cards stack on each other.功能已全部完成，但我想知道您是否可以帮我将这些 Bootstrap 卡堆叠在一起。 I don t like that empty space between the lines.我不喜欢字里行间的空白。 I kinda wanted it to look like unsplash.com image gallery where every image stacks no matter the size.我有点希望它看起来像 unsplash.com 图像库，无论大小，每个图像都堆叠在一起。 Thank you.谢谢你。
enter image description here在此处输入图像描述
I have created only one div with the class of row in which i add via javascript divs with the class of col-4 to have 4 tv shows per line.我只创建了一个带有 class 行的 div，我在其中通过 javascript div 添加了 col-4 的 class 以每行有 4 个电视节目。 I create the divs with the col-4 class based on the data received from API.我根据从 API 收到的数据，使用 col-4 class 创建 div。 Following i have the html,css and js files with the code.下面我有 html、css 和带有代码的 js 文件。
console.log('Connected') const form = document.querySelector('#searchForm'); const imgs = document.querySelector('#imgsDisplay') const search = document.querySelector('#searchDisplay') const row = document.querySelector('#row') form.addEventListener('submit',async function (e) { e.preventDefault(); row.innerHTML=''; const searchTerm = form.elements.query.value; const config = { params: { q: searchTerm } } const res = await axios.get(`http://api.tvmaze.com/search/shows`, config); search.textContent = form.elements.query.value makeImages(res.data) form.elements.query.value = ''; }) const makeImages = (shows) => { for (let result of shows) { if (result.show.image) { const col = document.createElement('div') col.classList.add('col-3', 'h-100') const imgDiv = document.createElement('div') imgDiv.classList.add('card', 'cardStyle', 'm-0') const img = document.createElement('IMG'); img.classList.add('card-img-top') img.src = result.show.image.medium; const label = document.createElement('h5') label.textContent = result.show.name; label.classList.add("card-title") const text = document.createElement('p') text.classList.add('card-text') text.innerHTML = result.show.summary; const cardBody = document.createElement('div') cardBody.classList.add('card-body') const showSite = document.createElement('a') showSite.href = result.show.officialSite; showSite.textContent = 'Official Website' showSite.classList.add('btn', 'btn-outline-success') cardBody.append(label) cardBody.append(text); cardBody.append(showSite) imgDiv.append(img); imgDiv.append(cardBody); col.append(imgDiv); row.append(col); imgs.append(row); } } }
#searchForm{ width: 40%; }.cardStyle{ width: 18rem; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>TV Show Search</title> <link rel="stylesheet" href="app:css"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/axios/dist/axios.min:js"></script> </head> <body> <section> <div class="container d-flex flex-column align-items-center"> <h1 class="display-1">TV Show Search</h1> <form id="searchForm"> <div id="inputForm" class="container input-group mb-3"> <input id="search" type="text" class="form-control" placeholder="TV Show Title" aria-label="TV Show Title" aria-describedby="button-addon2" name="query"> <button class="btn btn-outline-success" id="button-addon2">Search</button> </div> </form> </div> </section> <section> <div class="container ms-1 mt-5"> <h1 id='resultsHeader' class="display-3">Results for. <b><span id="searchDisplay"></span></b></h1> </div> </section> <section id="imgsDisplay" class="container mt-5"> <div id = "row" class="row d-flex"> </div> </section> <script src="app.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2021-03-02 12:51:07
Use overflow:hidden and height fix it will make your cards same height;使用溢出：隐藏和高度修复它会使你的卡片高度相同； and if in case you get extra text it will disappear;如果你得到额外的文字，它会消失；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.