自举垂直网格

我有一个关于如何将东西垂直放入网格系统与引导的问题。这是我想要做的：首先，屏幕应该分为两部分horinzontally，左侧部分8，右侧部分4. 然后，左侧部分应该再次垂直分开，在顶部会有成为一张桌子。在底部的部分，再次在每个部分2水平面分开一个面板将被显示。 [ 我的问题是，我该如何做垂直部分？自举垂直网格

<div class="row"> 
    <div class="col-md-8" id="leftside"> 
     ? 
     ? 
     ? 
    </div> 
    <div class="col-md-4" id="rightside"> 
     ... 
    </div>

来源

2015-10-16 yangsunny

检查：

<html lang="en"> 

<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 

<body> 

    <div class="row"> 
    <div class="col-md-8" style="height:500px;background-color:green;"> 
     <div class="row" style="height:50%;background-color:red;"> 
     <div class="col-md-12"> 
      <p>A</p> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-lg-6"> 
      <p>B</p> 
     </div> 
     <div class="col-lg-6" > 
      <p>C</p> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4" style="height:500px;background-color:black"> 

    </div> 
    </div> 

</body> 

</html>

Codepen：http://codepen.io/anon/pen/dYVxGa

来源

2015-10-16 09:24:44

非常漂亮，非常感谢你 – yangsunny

自举垂直网格

回答

相关问题