2017-09-03 130 views
0

我使用bootstrap创建了一个RWD页面,我制作了两个不同的容器以显示其中的内容,我在左侧创建了垂直导航,并且我必须在下面显示一个接一个的容器,但是当我添加另一个容器时,第一个和第二个容器都重叠。我无法确定两个容器重叠的原因。bootstrap容器相互重叠

这里是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; 
} 
+0

我的回答对你有帮助吗?请告诉我。如果确实如此,请将其标记为问题的正确答案,以整理过滤搜索。谢谢! – jswebb

回答

0

即使你的第一部分相对定位,你正在做的是第一部分的内容进行页面流动绝对定位它。更改定位您.head股利:

.head { 
    position: absolute; 
    left: 32%; 
    top: 20%; 
} 

.head { 
    position: relative; 
    left: 32%; 
    top: 20%; 
} 

,并按照你的设计结构,调整布局属性。