如何使這個響應移動視圖？ 並為電視節目 div 提供間距
[英]How do I make this responsive for mobile view? and also provide spacing for tv show div
問題描述
我想將搜索到的節目圖像居中，並在每個圖像下方提供間距。 12 col 網格無法正常工作。 圖像在桌面視圖中正確對齊，但在移動視圖中不正確。 如何使用 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%; }
<,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>
2 個解決方案
解決方案1
0 2021-03-31 10:56:55
您可以在媒體查詢 css 中使用以下代碼：
@media only screen and (max-width: 600px) {
.container div {
padding: 3%;
width: 210px;
margin: auto;
}
}
解決方案2
0
我與您的 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>
我如何將它變成一行中的 4 列並且還具有響應性？
[英]How do I make this into 4 column in one row and also responsive as well?
如何擺脫移動視圖中兩個容器之間的大間距？
[英]How do I get rid of a large spacing in between two containers in mobile view?
模態對移動設備沒有響應，如何使其在移動設備上響應？
[英]Modal is not responsive for mobile, How to make it responsive on mobile?
我如何在導航欄中進行更改，以便它也響應移動視圖
[英]How can i make changes in the navbar so that it is responsive to mobile view as well
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.