我正在开发一个Web应用程序，该应用程序应该能够对各种设备[手机，Tabs和当然是PC进行响应]，所以我现在正在处理的是用户个人资料页面，我希望页面能够响应，因此我使用了网格系统将页面划分如下：-计算机代码：-
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\nav-navbar.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card" style="width: 20rem; height:auto;">
<br>
<div class="row justify-content-md-center">
<img class="img-thumbnail" src="..\upload\tmp\32546861.jpg" style="width:14rem; height:12rem" alt="Avatar"></img>
<br>
<h2><a href="profile.php">Admin</a></h2>
</div>
<div class="row justify-content-md-center">
<div class="col-sm-9">
<svg class="octicon octicon-location" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
<input type="submit" class="btn btn-success btn-sm btn-block" value="متابعة"></input>
<br>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card ml-5" style="width:auto; height:auto;">
<ul class="nav nav-tabs nav-fill">
<li class="nav-item gu">
<a class="nav-link active" herf="#"> عن الشركة</a>
</li>
<li class="nav-item gu">
<a class="nav-link" herf="#">اخر الدرفتات<a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
好吧，此代码正在与[Computers]响应地工作，问题出在小屏幕设备上，该页面未显示我想要的屏幕截图：-android设备
我希望选项卡面板位于屏幕的中央，内容要响应，并且[profile]图片下的[名称标签]和屏幕中央的图片，我试图完成我想要的操作，但失败了卡中的每个元素都在新行中，并使用了justify-content-md-center类和个人资料图片，我也尝试将其居中放置在屏幕中间...。
CSS文件（profile.css）：-
body{
/*background-image:url("images/2.png");*/
background-color:rgba(26, 26, 26, 0.3) !important;
background-repeat:repeat;
}
@font-face {
font-family: "hana";
src: url("../fonts/hana.ttf");
}
@font-face {
font-family: "spirt";
font-style: Bold;
src: url("../fonts/spirt.ttf");
}
/* nav items */
.gu{
font-family:hana;
}
/* Profile CSS Style Section */
.card h2{
font-family:hana;
}
.card input[type=submit]{
font-family:hana;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
}
.nav {
margin-left:auto;
float:left;
}
.col-md-9{
margin-left:auto;
float: left;
}
}
/* Profile CSS Section END */
您可以只使用Bootstraps响应式类为您处理大小，以下是您共享的代码段的编辑，希望对您有所帮助。
<div data-v-c06aa6da="" class="container"><div data-v-c06aa6da="" class="row"><div data-v-c06aa6da="" class="col-12 col-md-3"><div data-v-c06aa6da="" class="card" style="height: auto;"><div data-v-c06aa6da="" class="text-center"><img data-v-c06aa6da="" src="https://api.adorable.io/avatars/285/[email protected]" alt="Avatar" class="img-thumbnail mt-4" style="width: 14rem; height: 12rem;"><h2 class="text-center"><a data-v-c06aa6da="" href="">Admin</a></h2></div><div data-v-c06aa6da="" class="row justify-content-md-center"><div data-v-c06aa6da="" class="col-sm-9"><svg data-v-c06aa6da="" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true" class="octicon octicon-location"><path data-v-c06aa6da="" fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg><input data-v-c06aa6da="" type="submit" value="متابعة" class="btn btn-success btn-sm btn-block"><br data-v-c06aa6da=""></div></div></div></div><div data-v-c06aa6da="" class="col-12 col-md-9"><div data-v-c06aa6da="" class="card ml-1 ml-md-5" style="width: auto; height: auto;"><ul data-v-c06aa6da="" class="nav nav-tabs nav-fill"><li data-v-c06aa6da="" class="nav-item gu"><a data-v-c06aa6da="" herf="#" class="nav-link active"> عن الشركة</a></li><li data-v-c06aa6da="" class="nav-item gu"><a data-v-c06aa6da="" herf="#" class="nav-link">اخر الدرفتات</a></li></ul></div></div></div></div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div data-v-c06aa6da="" class="container"><div data-v-c06aa6da="" class="row"><div data-v-c06aa6da="" class="col-12 col-md-3"><div data-v-c06aa6da="" class="card" style="height: auto;"><div data-v-c06aa6da="" class="text-center"><img data-v-c06aa6da="" src="https://api.adorable.io/avatars/285/[email protected]" alt="Avatar" class="img-thumbnail mt-4" style="width: 14rem; height: 12rem;"><h2 class="text-center"><a data-v-c06aa6da="" href="">Admin</a></h2></div><div data-v-c06aa6da="" class="row justify-content-md-center"><div data-v-c06aa6da="" class="col-sm-9"><svg data-v-c06aa6da="" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true" class="octicon octicon-location"><path data-v-c06aa6da="" fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg><input data-v-c06aa6da="" type="submit" value="متابعة" class="btn btn-success btn-sm btn-block"><br data-v-c06aa6da=""></div></div></div></div><div data-v-c06aa6da="" class="col-12 col-md-9"><div data-v-c06aa6da="" class="card ml-1 ml-md-5" style="width: auto; height: auto;"><ul data-v-c06aa6da="" class="nav nav-tabs nav-fill"><li data-v-c06aa6da="" class="nav-item gu"><a data-v-c06aa6da="" herf="#" class="nav-link active"> عن الشركة</a></li><li data-v-c06aa6da="" class="nav-item gu"><a data-v-c06aa6da="" herf="#" class="nav-link">اخر الدرفتات</a></li></ul></div></div></div></div>
</body>
</html>enter code here
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句