0
如何更改我的代码以便调整大小以保持窗口内的所有内容完好无损？如图所示，文本在调整大小时位于部分之外。此外，图像下降在导航栏调整大小时引导程序混乱
任何帮助表示赞赏。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="css/homepage.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<div class="dropdown">
<button onclick="location.href='homenew.html'" class="dropbtn" >WATER</button>
<div class="dropdown-content">
<a class="page-scroll" href="homenew.html#services">OUR MISSION</a>
<a class="page-scroll" href="homenew.html#services">HELP US</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="aboutus.html">About us</a>
</li>
<li>
<a class="page-scroll" href="team.html">Our Team</a>
</li>
<li>
<a class="page-scroll" href="volunteering.html">Volunteer</a>
</li>
<li>
<a class="page-scroll" href="contactus.html">Contact</a>
</li>
<li>
<a class="page-scroll" href="donations.html">Donate</a>
</li>
</ul>
<img class="alignright" src="icons/fundraisingbar.png">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12 ">
</div>s
<div class = "middle">
<h1 class="h1style offwhite">WATER2O</h1>
<h2 class="">mineral water</h2>
</div>
<div class = "middle2 offwhite ">
<h2>H20</h2>
<h3>ALTERING PERCEPTION </h2>
</div>
<div class ="animated bounceIn ">
<img class="arrowsize" src="http://www.under-water.co.uk/imgs/icons/tick-256x256-red.png">
<p class="whitetext">Registered</p>
</div>
</section>
CSS
.icons{
width: 100px;
height: 100px;
}
.iconz{
padding-top: 10px;
}
.icontext{
padding-top: 10px;
font-weight: bold;
}
.fundraise{
padding-top: 40px;
padding-bottom: 40px;
}
.offwhite{
color: #EBE7E0;
}
.donation_amount{
color: red;
}
.icons2{
width: 150px;
height: 150px;
}
.middle2{
padding: 10px;
border: 5px solid gray;
margin: 0;
}
.description_icon{
padding-top: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
padding-bottom: 50px;
}
.intro-section{
background-color: black;
/*background-image: url(https://i.ytimg.com/vi/9L6Aj0CJCuc/maxresdefault.jpg);*/
}
.main_text{
color: white;
top: 450px;
}
.logofirst{
height: 300px;
width: 450px;
}
.breadtext{
color: white;
padding-top: 120px;
padding-left: 100px;
font-size:75px;
}
.breadtext2{
color: white;
padding-left: 210px;
font-size:30px;
}
.footer1{
padding-bottom: 20px;
padding-top: 10px;
background-color: #f9f9f9;
font-weight: bold;
}
.arrowsize{
height: 100px;
width: 100px;
color: white;
}
.whitetext{
color: white;
font-weight: bold;
}
/* Dropdown Button */
.dropbtn {
background-color: #F8F8F8;
color: 777777;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
你能为上面的代码做一个片段？所以，这可能很容易找出你的问题.. –
@ManiRaj补充CSS –