Question

我正在开发一个Web应用程序，该应用程序应对各种设备[手机，Tab和当然是PC的]做出响应，所以我现在正在处理的是用户个人资料页面，我希望该页面具有响应性，我使用网格系统将页面划分为：- Computer 代码：-

<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>

好吧，此代码可与 [计算机] 响应地工作，问题出在小屏幕设备上，页面没有显示我想要的屏幕截图：-android Device

我希望选项卡面板位于屏幕中央，并且内容要响应以及个人资料图片和屏幕中央图片下的[名称标签]，我尝试完成我想要的操作，但是我失败了，我将卡中的每个元素都换成了新的一行，并使用了该类 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 */

Answer 1

您可以只使用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/abott@adorable.png" 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/abott@adorable.png" 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

自适应页面引导程序4 [卡和水龙头]

1 个答案: