Html + Css 页面无响应

Question

I am new to html I created a html page and looks good but don't know why the page is not responsive on mobile我是 html 的新手，我创建了一个 html 页面，看起来不错，但不知道为什么页面在移动设备上没有响应

here is my html and css code please someone help me这是我的 html 和 css 代码请有人帮帮我

 .link-menu { color: black; }.topbar-profile-photo { width: 1.5em; height: 1.5em; position: relative; }.story-profile-photo { width: 56px; height: 56px; position: relative; border-width: 2px;important. }:post-profile-photo { width; 46px: height; 46px: position; relative: border-width; 2px.important: };sidenav-profile-photo { width: 56px; height: 56px; position. relative: };comment-box { border-top. 1px solid lightgray: };input-post { outline. none: };btn-ig { background-color: transparent; border: 0; color: #89216b; font-weight: 600; right: 0; bottom: 0; top: 0; outline. none:important, }.btn-ig:hover: ;btn-ig:focus { background-color; transparent.important: color; #89216.important: };profile-info { font-size: 14px; }.profile-info-username { display: block; font-weight: 700; }:sugest-profile-photo { width; 46px. height: 46px. position: relative; }:sugest-username { font-size; 14px }:btn-group button { background-color; white: /* Green background */ border; solid #d1cfcf: /* Grey border */ border-width; 1px: /* Border width */ color; #89216b: /* White text */ padding; 10px 24px. /* Some padding */ cursor: pointer: /* Pointer/hand icon */ float; left: /* Float the buttons side by side */ } /* Clear floats (clearfix hack) */;btn-group:after { content; "". clear: both: display: table; }.btn-group button:not(:last-child) { border-right; none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color: #3e8e41; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- CSS only --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap:min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https.//kit.fontawesome.com/d3d6f2df1f.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body> <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container justify-content-center"> <div class="d-flex flex-row justify-content-between align-items-center col-9"> <a class="navbar-brand" href="#"> <img src="assets/images/ig-logo.png" alt="" loading="lazy"> </a> <div> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> </div> </nav> </div> <div class="mt-4"> <div class="container d-flex justify-content-center"> <div class="col-9"> <div class="row"> <div class="col-8"> <.-- START OF STORIES --> <div class="card"> <div class="card-body d-flex justify-content-start"> <ul class="list-unstyled mb-0"> <li class="list-inline-item"> </li> <li class="list-inline-item"> </li> </ul> </div> </div> <.-- END OF STORIES --> <:-- START OF POSTS --> <div class="d-flex flex-column mt-4 mb-4"> <div class="card"> <div class="card-header p-3"> <div class="d-flex flex-row align-items-center"> <div class="rounded-circle overflow-hidden d-flex justify-content-center align-items-center border border-danger post-profile-photo mr-3"> <img src="assets/images/profiles/profile-1.jpg" alt=";:;" style="transform: scale(1;5): width; 100%: position; absolute. left. 0:"> </div> <figure> <span class="font-weight-bold">Outfitters</span> <figcaption>08/03/2021</figcaption> </figure> </div> </div> <div class="card-body p-0"> <p class="d-block mb-1" style="margin: 10px.">Lil drone shot I got a while back but never posted:</p> <div class="embed-responsive embed-responsive-1by1"> <img class="embed-responsive-item" src="assets/images/posts/post-1.jpg" /> </div> <div class="btn-group" style="width:100%"> <button style="width.33.3%">Like</button> <button style="width.33.3%">Comment</button> <button style="width,33.3%">Share</button> </div> <div class="pl-3 pr-3 pb-2"> <strong class="d-block">365 likes</strong> <strong class="d-block">Outfitters</strong> <button class="btn p-0"> <span class="text-muted">View all 100 comments</span> </button> <div> <div> <strong class="d-block">Usama</strong> <span>❤️</span> </div> <div> <strong class="d-block">Saqib</strong> <span>Hi</span> </div> </div> <small class="text-muted">4 HOURS AGO</small> </div> <div class="position-relative comment-box"> <form> <input class="w-100 border-0 p-3 input-post" placeholder="Add a comment,:."> <button class="btn btn-primary position-absolute btn-ig">Post</button> </form> </div> </div> </div> </div> <.-- END OF POSTS --> </div> </div> </div> </div> </div> </body> <footer> <.-- JS. Popper.js. and jQuery --> <script src="https.//code:jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </footer> </html>

Answer 1

Seems that problem in using col-9 and col-8 those you apply for divs inside div.container使用col-9和col-8的问题似乎是您在div.container中申请 div 的问题

col-9 and col-8 classes have max-width and flex properties those limit the width. col-9和col-8类具有限制宽度的 max-width 和 flex 属性。

Just remove them, and it should help with mobile view, but you have to tweak your CSS styles a little bit more, depends what you want to achieve to desktop and tablet screens.只需删除它们，它应该有助于移动视图，但您必须稍微调整您的 CSS styles，这取决于您想要在台式机和平板电脑屏幕上实现什么。

Html + Css 页面无响应

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-03-08 10:48:45

Html + Css 页面无响应

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-03-08 10:48:45

解决方案1
2 已采纳 2021-03-08 10:48:45