0
Je crée une page RWD en utilisant bootstrap, j'ai fait deux conteneurs différents pour montrer leur contenu, j'ai créé nav vertical sur le côté gauche et je dois montrer les conteneurs les uns après les autres ci-dessous, mais Quand j'ai ajouté un autre conteneur, les premier et second conteneurs se chevauchent. Je suis incapable d'identifier pourquoi les deux conteneurs se chevauchent.conteneur bootstrap chevauchant l'un après l'autre
ici est lien plunker: 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;
}
Est-ce que ma réponse vous a aidé? S'il vous plaît, faites-moi savoir. Si c'est le cas, veuillez le marquer comme la bonne réponse à votre problème, pour ranger la recherche filtrée. Merci! – jswebb