如何使这个响应移动视图？并为电视节目 div 提供间距

Question

I want to centre the searched images of shows and also provide spacing below every image.我想将搜索到的节目图像居中，并在每个图像下方提供间距。 The 12 col grid isn't working around properly. 12 col 网格无法正常工作。 The images are aligned properly in desktop view but doesn't in mobile view.图像在桌面视图中正确对齐，但在移动视图中不正确。 How to fix this with css and bootstrap.如何使用 css 和引导程序解决此问题。 But the grid is not working.但是网格不工作。 Could you please help me out?你能帮帮我吗？

 const form = document.querySelector('#search-form'); const container = document.querySelector('#container'); form.addEventListener('submit',async function(e){ e.preventDefault(); const searchTerm = form.elements.query.value; const config = { params: { q:searchTerm}} const res = await axios.get(`http://api.tvmaze.com/search/shows`,config); clear(); displayShows(res.data); form.elements.query.value=''; }) const displayShows = (shows) =>{ for (let res of shows){ if(res.show.image){ const div = addShow(res); container.appendChild(div); } } } const addShow = (res) => { const div=document.createElement('DIV'); const img=document.createElement('IMG'); img.src = res.show.image.medium; const spanName=document.createElement('P'); spanName.textContent=res.show.name; div.append(img); return div; } function clear(shows){ container.innerHTML = ''; }

 *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #8EC5FC; background-image: linear-gradient(120deg, #fc8eed 0%, #E0C3FC 50%, #ffffff 100%); font-family: "Poppins", sans-serif; min-height: 100vh; } header{ font-size: 1.5rem; color: #960189;; } header,form { min-height: 20vh; display: flex; justify-content: center; align-items: center; } form input, form button { padding: 0.4rem; font-size: 1.6rem; border: none; background: white; margin-right: 10px; } form input{ width: 27%; border-radius: 10px; } form button { color: white; background: #e44ad7; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; } form button:hover { background: white; color: #e44ad7; }.container{ margin: 5%; }.container div{ display: inline; padding: 3%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="./TV_ShowSearch:css"> <script src="https.//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>TV SHOW SEARCH</title> </head> <body> <header> <h1>TV SHOW SEARCH</h1> </header> <form autocomplete="off" id="search-form"> <input type="text" placeholder="TV Show Title" name="query"> <button id="search-btn">Search</button> </form> <div class="container align-items-center" id="container"> </div> <script src="./TV_ShowSearch.js"></script> </body> </html>

enter image description here在此处输入图像描述

Answer 1

You can use following code in media query css:您可以在媒体查询 css 中使用以下代码：

@media only screen and (max-width: 600px) { 
  .container div {
  padding: 3%;
  width: 210px;
  margin: auto;
 }
}

Answer 2

I worked around with your CSS and Here's what I got:我与您的 CSS 一起工作，这就是我得到的：

 const form = document.querySelector('#search-form'); const container = document.querySelector('#container'); form.addEventListener('submit',async function(e){ e.preventDefault(); const searchTerm = form.elements.query.value; const config = { params: { q:searchTerm}} const res = await axios.get(`http://api.tvmaze.com/search/shows`,config); clear(); displayShows(res.data); form.elements.query.value=''; }) const displayShows = (shows) =>{ for (let res of shows){ if(res.show.image){ const div = addShow(res); container.appendChild(div); } } } const addShow = (res) => { const div=document.createElement('DIV'); const img=document.createElement('IMG'); img.src = res.show.image.medium; const spanName=document.createElement('P'); spanName.textContent=res.show.name; div.append(img); return div; } function clear(shows){ container.innerHTML = ''; }

 *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #8EC5FC; background-image: linear-gradient(120deg, #fc8eed 0%, #E0C3FC 50%, #ffffff 100%); font-family: "Poppins", sans-serif; min-height: 100vh; } header{ font-size: 1.5rem; color: #960189;; } header,form { min-height: 20vh; display: flex; justify-content: center; align-items: center; } form input, form button { padding: 0.4rem; font-size: 1.6rem; border: none; background: white; margin-right: 10px; } form input{ width: 27%; border-radius: 10px; } form button { color: white; background: #e44ad7; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; } form button:hover { background: white; color: #e44ad7; }.container{ margin: 5%; }.container div{ display: inline; padding: 3%; } @media screen and (max-width: 642px) { form input{ width: calc(27% + 100px); } } @media screen and (max-width: 400px) { form input, form button{ width: calc(50% + 100px); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="./TV_ShowSearch:css"> <script src="https.//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>TV SHOW SEARCH</title> </head> <body> <header> <h1>TV SHOW SEARCH</h1> </header> <form autocomplete="off" id="search-form"> <input type="text" placeholder="TV Show Title" name="query"> <button id="search-btn">Search</button> </form> <div class="container align-items-center" id="container"> </div> <script src="./TV_ShowSearch.js"></script> </body> </html>

如何使这个响应移动视图？并为电视节目 div 提供间距

问题描述

2 个解决方案

解决方案1
0 2021-03-31 10:56:55

解决方案2
0

如何使这个响应移动视图？ 并为电视节目 div 提供间距

问题描述

2 个解决方案

解决方案1 0 2021-03-31 10:56:55

解决方案2 0

如何使这个响应移动视图？并为电视节目 div 提供间距

解决方案1
0 2021-03-31 10:56:55

解决方案2
0