自举垂直网格

Question

自举垂直网格

我有一个关于如何使用Bootstrap在网格系统中垂直放置东西的问题。这是我要尝试的操作：首先，应将屏幕分为两部分，左部分为8，右部分为4。然后，左部分应再次垂直划分，在顶部将有一个桌子。在里面。在底部，将再次在每个部分中以2个水平ane划分面板。[

我如何做垂直部分？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ubi*_*ers 5

检查一下：

<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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，4 月前
查看次数：	24244 次
最近记录：	7 年，3 月前