0
如何使我的网页响应，了响应我的意思是它看起来应当是相同的 在台式机和笔记本电脑same.But我的笔记本电脑和3得到很好（Bootstrap类）的两排我想它有3行。我有一个像素设计，我需要实现高度和宽度的百分比，使它看起来相同。我有相同的笔记本电脑和桌面的CSS如何可以这是可以实现的。 我有一个导航栏，我需要把它放在一个容器，使其响应？ 请帮忙。好/导航栏的引导行为不响应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse container-fluid ">
<img src="assets/img/Logo.png" class="santanderIcon" >
<div class="hline" > </div>
<p class="e2e-label">E2E Portal</p>
<p class="login-label">Login</p>
<p class="help-label">Help</p>
</nav>
<div class="container">
<div class="row " style="margin-top: 100px">
<div class="col-lg-4">
<div class="well">
<img src="assets/img/Ideas.png">
<h3>Ideas</h3>
<p>Lorem ipsum dolor sit adipisicing elit...</p>
<p>Ut enim ad minim veniam, exercitation laboris...</p>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<img src="assets/img/Business Case.png">
<h3>Business Case</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, exercitation laboris...</p>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<img src="assets/img/Project Cost Calculator.png">
<h3>Project Cost Calculator</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, laboris...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="well">
<img src="assets/img/Dashboard.png">
<h3>Dashboard</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam,exercitation laboris...</p>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<img src="assets/img/Manage My Project.png">
<h3>Manage my projects</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, quis ullamco laboris...</p>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<img src="assets/img/Personalization.png">
<h3>Personalization</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, ullamco laboris...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="well">
<img src="assets/img/My BAAR.png">
<h3>My BAAR</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, quis ullamco laboris...</p>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<img src="assets/img/My Approval.png">
<h3>My Approvals</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, ullamco laboris...</p>
</div>
</div>
<div class="col-lg-4">
<div class="well">
<img src="assets/img/My Approval.png">
<h3>User Management</h3>
<p>Lorem ipsum dolor sit amet, elit...</p>
<p>Ut enim ad minim veniam, ullamco laboris...</p>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
/* Bootstrap classes */
html, body { height: 100%; }
body{
background-color: #EDEEF2;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.navbar{
min-height: 80px;
}
.santander-label{
display: inline-block;
color:white;
font-size:30pt;
vertical-align: middle;
}
.login-label{
display: inline-block;
color:white;
padding-left:550px;
font-size:20pt;
vertical-align: middle;
}
.e2e-label{
display: inline-block;
color:white;
padding-left:100px;
font-size:30pt;
vertical-align: middle;
}
.help-label{
display: inline-block;
color:white;
padding-left:50px;
font-size:20pt;
vertical-align: middle;
}
/*Overide default class of bootstrap */
.navbar-inverse{
background: linear-gradient(to right,#EC0000,#740808);
border-bottom:none;
}
.well{
background-color:white !important;
border-style:none !important;
border: none ;
border-radius:unset;
background-image: none;
box-shadow: 0px 0px 5px 5px lightgrey;
}
.santanderIcon{
height:30px;
width:160px;
padding-left:1.5625%;
padding-right:2.0312%;
}
.hline{
display:inline-block;
height:28px;
width:2px;
background-color: white;
position:relative;
left:30px;
top:10px;
}
bootstrap提供col-lg- *用于您可以使用的桌面/大屏幕。如果你想限制你的网站的宽度，使其在台式机和笔记本电脑使用看起来相同，可以使用类容器，它的最大宽度为1170px。此外，如果你可以提供一些示例代码，我可以更好地帮助 –
添加代码请检查并让我知道。 –