0
Ich erstelle eine RWD Seite mit bootstrap, ich habe zwei verschiedene container gemacht, um dort den Inhalt anzuzeigen, ich habe ein vertikales nav auf der linken seite erstellt und ich muss die container nacheinander nach unten zeigen, aber Wenn ich einen anderen Container hinzugefügt habe, überlappen sich der erste und der zweite Container. Ich kann nicht erkennen, warum sich beide Container überlappen.bootstrap container überlappend hintereinander
hier ist Plunker Link: This is a link plunker
<!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 class=""><a href="#">Home</a></li>
<li class=""><a href="#">Team</a></li>
<li class=""><a href="#">About</a></li>
<li class=""><a href="#">Portfolio</a></li>
<li class=""><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section style="position: relative;">
<div class="container">
<div class="row head">
<h1>Meet the team</h1>
<div class="col-sm-6" style="border-style: solid;width: 300px;height: 450px;">
</div>
<div class="col-sm-6" >
<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>
<p> Finance is critical. If sufficient investment is made in infrastructure and venture capital is made available, there will be a big improvement in thesituation.
</p>
<p> 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>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 style="text-align: center;
position: relative; margin-top: 20px;
margin-bottom: 30px;
padding: 0;">
<div class="container">
<div class="row ">
<div class="col-sm-6" style="">
<ul style="list-style: none;">Prior Investments
<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 style="list-style: none;">Active Investments
<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>
</div>
<script type="text/javascript" src="./js/jquery-min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>
</html>
main.css
@font-face {
font-family: "PlayfairDisplay-Bold", serif;
src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');
}
@font-face {
font-family: "HelveticaNeue",Helvetica, Arial, sans-serif;
src: url('fonts/HelveticaNeue.ttf') format('truetype');
}
#page{max-width: 1200px ; margin: 0 auto;position: relative;}
header {
height: 430px;
position: relative;
}
header a.logo {
z-index: 1;
position: absolute;
display: block;
width: 160px;
height: 66px;
/* background: url(../images/logo.svg) no-repeat 0 0;*/
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: 25%;
height: 100%;
background: #fff;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1105;
overflow: hidden;
border-right: 2px solid;
}
.main-menu .close-menu {
width: 18px;
height: 18px;
margin: 35px 25px 0 0;
float: right;
cursor: pointer;
background-size: contain;
}
.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;
background-color: #f1f1f1;
}
.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;
}
.head {
position: absolute;
left: 32%;
top: 20%;
}
.row.head h1{
font-family: 'PlayfairDisplay-Bold', serif;
font-size: 54px;
font-weight: 500;
background-color: #fff;
color: #8A2BE2;
overflow-x: hidden;
}
Hat meine Antwort Ihnen geholfen? Lass es mich wissen, bitte. Wenn dies der Fall ist, markieren Sie es bitte als die richtige Antwort für Ihr Problem, um die gefilterte Suche aufzuräumen. Vielen Dank! – jswebb