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。此外，如果你可以提供一些示例代碼，我可以更好地幫助 –
添加代碼請檢查並讓我知道。 –