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

【问题标题】：How do I make this responsive for mobile view? and also provide spacing for tv show div如何使这个响应移动视图？并为电视节目 div 提供间距
【发布时间】：2021-06-27 09:10:53
【问题描述】：

我想将搜索到的节目图片居中，并在每张图片下方提供间距。 12 col 网格无法正常工作。图像在桌面视图中正确对齐，但在移动视图中不正确。如何使用 css 和 bootstrap 解决此问题。但是网格不工作。你能帮帮我吗？

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

【问题讨论】：

听起来你根本不想要大部分的 Bootstrap。所以不要使用引导程序。只需编写 CSS。

标签： javascript css bootstrap-4 responsive-design responsive

【解决方案1】：

您可以在媒体查询 css 中使用以下代码：

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

【讨论】：

【解决方案2】：

我使用了你的 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>

【讨论】：