Question

如何使我的页面响应，通过响应我的意思是它应该看起来同样在台式机和笔记本电脑上也一样。但我在笔记本电脑中得到两排井（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;
 }

Answer 1

最好将导航内容放在容器中。

<nav class="navbar navbar-fixed-top navbar-inverse container-fluid ">
        <div class="container">

            <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> 
        </div>
</nav>

Answer 2

查看Bootstrap网格系统。

笔记本电脑是一种中型设备（moslty）。要在中型设备上将装订线设置为3，您必须将.col-md类添加到每个div。

<div class="col-md-4 col-lg-4">

除此之外，请检查您的导航栏代码。这看起来很不对。

井/ Navbar在bootstrap中没有表现出响应

2 个答案: