文章/答案/技术大牛

发布

社区首页 >问答首页 >响应页引导4[卡片和水龙头]

问响应页引导4[卡片和水龙头]
EN

Stack Overflow用户

提问于 2020-04-10 16:00:40

回答 1查看 189关注 0票数 0

我正在开发一个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>

好吧，这段代码是与计算机一起响应工作的。问题是在小屏幕设备中，页面没有显示我想要的屏幕截图:- android设备

我希望选项卡面板位于屏幕中心，内容响应，配置文件图片下的名称标签和屏幕中心的图片，我试图完成我想要的，但是我失败了，我在一个新的行中制作了卡片的每个元素，使用了类justify-content-md-center和配置文件图片，我还试图在屏幕中间对它进行居中.

CSS File (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 */

html

css

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-11 17:02:48

您可以使用引导响应类来处理您的大小，下面是您共享的代码片段的编辑，希望这会有所帮助。

<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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61144027

复制

相似问题

问响应页引导4[卡片和水龙头]
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应页引导4[卡片和水龙头]EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应页引导4[卡片和水龙头]
EN