0
我正在做引導RWD頁面，每次我面臨的問題是，每當我添加新的內容時，它會與最後的內容重疊，例如在我添加<hr>標記時，在鏈接器鏈接與last/above內容重疊，我對整個頁面樣式或特定元素樣式缺少什麼？謝謝。bootstrap新內容添加原因重疊
https://plnkr.co/edit/0QaOzR3fZM147g2jCbW1
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Investcube</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div id="page">
<header>
<nav class="main-menu" id="main-menu-section">
<div class="hero">
<h1>investcube</h1>
<a class="logo" href="#" title="investcube"><span>investcube</span> </a>
</div>
<div class="menu-item-list">
<ul>
<li ><a href="#">Home</a></li>
<li ><a href="#">Team</a></li>
<li ><a href="#">About</a></li>
<li ><a href="#">Portfolio</a></li>
<li ><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section >
<div class="container">
<div class="row " style="margin-bottom: 100px" id="meet-the-team ">
<h1 >Meet the team</h1>
<!-- <div class="col-sm-6" style="border-style: solid;width: 300px;height: 450px;margin:15px " > -->
<div class="col-sm-6" id="mask">
</div>
<div class="col-sm-6" style="margin:15px">
<h3>iain shovlin</h3>
<h4>chairman & founding partner</h4>
<div class="row">
<div class="col-sm-6 other">
<h4>Chicago, USA</h4>
</div>
<div class="col-sm-6 other2">
<a href="#" target="_blank" title=" LinkedIn">
</a>
</div>
</div>
<blockquote>
<p class="quote">Finance is critical. If sufficient investment is made in infrastructure and venture capital is made available, there will be a big improvement in the situation.</p>
</blockquote>
<p class="about">Before forming Guild Capital in 2009, Iain was a venture capitalist with Technology Crossover Ventures in Palo Alto, California for six years. At TCV he undertook investments spanning consumer internet,business process outsourcing, and software. Prior to venture capital, Iain was a management consultant with Bain & Company</p>
<p class="about">Iain was born in Glasgow, Scotland and has an M.A. in International Business from the University of Edinburgh, Scotland.</p>
</div>
</div>
</section>
<section class="list" style="width: 100%" >
<div class="container">
<div class="row ">
<div class="col-sm-6 " >
<ul class="Service"><h4>Prior Investments</h4>
<li>AdKnowledge</li>
<li>Claria</li>
<li>Dermstore</li>
<li>Dealon</li>
<li>EXL Service (NASDAQ: EXLS)</li>
<li>Hautelook (Acquired by Nordstrom)</li>
<li>Integres</li>
<li>Leadscon (Acquired by Access Intelligence)</li>
<li>NexTag</li>
<li>Security Source</li>
<li>Sensa</li>
<li>Total Attorneys </li>
</ul>
</div>
<div class="col-sm-6 " >
<ul class="Service"><h4>Active Investments </h4>
<li>Argyle Search Partners*</li>
<li>Candy Club</li>
<li>Club W</li>
<li>Fabletics</li>
<li>Gaming Insiders</li>
<li>Gohealth</li>
<li>Home Chef</li>
<li>JustFab</li>
<li>Atidiv</li>
<li>MailControl</li>
<li>Mystery Tackle Box</li>
<li>Techweek*</li>
</ul>
</div>
</div>
</div>
</section>
<section class="arrow">
<div class="arrows prev "></div>
<div class="smriti-Jayaraman-Vic">
<a href="#" class=""> Smriti Jayaraman </a>
<a href="#" class=""> Vice President </a>
</div>
<div class="arrows next "></div>
<div class="akshat-jain-Senior-A">
<a href="#" class=""> Akshat jain </a>
<a href="#" class=""> Senior Associate </a>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="col-md-12">
<hr class="col-xs-12">
</div>
</div>
</section>
<script type="text/javascript" src="./js/jquery-min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>
</html>
CSS
@font-face {
font-family: "PlayfairDisplay-Regular", serif;
src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
}
@font-face {
font-family: "HelveticaNeue",Helvetica, Arial, sans-serif;
src: url('fonts/HelveticaNeue.ttf') format('truetype');
}
#page{ margin: 0 auto;
position: absolute;
left: 30%;
top: 20%;
max-width: 900px
}
header {
/* height: 430px;*/
position: relative;
}
header a.logo {
z-index: 1;
position: absolute;
display: block;
width: 160px;
height: 66px;
background-size: contain;
top: 15px;
left: 20px;
}
header a.logo span {
display: none;
}
header div.hero {
position: relative;
width: 100%;
top: 0;
left: 3px;
letter-spacing: 6px;
text-transform: uppercase;
/* margin-top: 30%;*/
padding: 50px 20px 20px 50px;
}
header div.hero h1 {
font-size: 2em;
line-height: 2em;
margin: 0;
color: #8A2BE2;
font-weight: 600;
}
body {
font-family: 'HelveticaNeue',Helvetica, Arial, sans-serif;
font-size: 16px;
font-style: normal;
background-color: #fff;
overflow-x: hidden;
}
/* Navbar styles */
.main-menu {
width: 327px;
height: 2817px;
background: #f6f6f6;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1105;
overflow: hidden;
border: 1px solid #d7d7d7;
}
.menu-item-list {
display: block;
float: left;
width: 100%;
height: 100%;
position: relative;
}
.menu-item-list ul {
padding: 0 ;
margin: 0;
width: 100%;
position: relative;
}
.menu-item-list ul li {
list-style: none;
margin: 0 0;
padding: 0 0 0 10px;
border-top: 1px solid #262626;
border-bottom: 1px solid #262626;
}
.menu-item-list ul li a {
margin: 0;
padding: 8px 16px;
color: #373737;
font-weight: 300;
font-size: 19px;
display: block;
line-height: 60px;
text-align: right;
text-decoration: none;
}
.menu-item-list ul li a:hover,
.menu-item-list ul li.active a {
color: #8A2BE2;
border-right: 2px solid #8A2BE2;
}
#meet-the-team {
border-radius: 0px;
width: 681.95px;
height: 64px;
color: #402C59;
font-family: 'PlayfairDisplay-Regular', serif;
font-size: 48.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: left;
}
#mask {
border-radius: 0px;
width: 299px;
height: 499px;
background-image: url(mask);
background: #d7d7d7;
box-shadow: 0px 2px 4px rgba:(0,0,0,0.5);
}
#finance-is-critical {
border-radius: 0px;
width: 393px;
height: 96px;
color: #402c59;
font-family: 'HelveticaNeue', sans-serif;
font-size: 18.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: left;
}
h3,h4{
text-transform: capitalize;
}
.Service { list-style: none;}
.Service :hover
{
color: #8A2BE2;
text-decoration: underline;
}
blockquote{margin: 0;color: #8A2BE2;background-color: #fff; border-left: none; }
blockquote p{margin: 30px 30px 20px 15px; }
blockquote p.quote{font-style: italic;font-size: 1.2em;}
blockquote::before{content: '\201c'; color: #8A2BE2;position: absolute;top: 120px;left:8px;font-size: 5em; font-family:serif; }
blockquote p.quote::after{content: '\201d';font-family: serif;}
section.arrow{
margin-top: 100px;
margin-bottom: 30px;
padding: 0;
}
.arrows{
/* width: 48px;
height: 48px;
border-color: #000;
position: relative;
bottom: 2%;
margin-top: -31px;*/
width: 48px;
height: 48px;
border-color: #000;
position: absolute;
bottom: 0px;
margin-top: 42px;
}
.prev{
border-bottom: 4px solid;
border-left: 4px solid;
transform: rotate(45deg);
left: 10px;
}
.next{
border-bottom: 4px solid;
border-left: 4px solid;
transform: rotate(-135deg);
right: 10px;
}
.smriti-Jayaraman-Vic {
width: 149.62px;
height: 56px;
color: #402c59;
font-family: "HelveticaNeue";
font-size: 18.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: left;
position: absolute;
bottom: 0px;
left: 75px;
}
.smriti-Jayaraman-Vic ,.akshat-jain-Senior-A li{
list-style: none;
}
.lists{
width:200px;
}
.akshat-jain-Senior-A {
/* width: 149.62px;*/
width:133.62px;
height: 56px;
color: #939393;
font-family: "HelveticaNeue";
font-size: 18.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: right;
margin-left: 50%;
position: absolute;
right: 75px;
bottom: 1px;
}
.akshat-jain-Senior-A a, .smriti-Jayaraman-Vic a{
color: #523e6c;
}
.akshat-jain-Senior-A a:hover,
.smriti-Jayaraman-Vic a:hover{
color: #8A2BE2;
}
.arrow :hover{color: #8A2BE2;}
section.gallery{
margin-top: 100px;
margin-bottom: 30px;
padding: 0;
}
佈局錯誤，請正確設置佈局，然後有人能夠幫助您。 –