Question

我有一个关于如何将内容垂直放入带引导程序的网格系统中的问题。这是我正在尝试做的事情：首先，屏幕应分为两个部分，即horinzontally，左部分8，右部分4。然后，左边的部分应该垂直分开，在顶部将有一个桌子。在底部，在每个部分中再次划分为2个水平面，将示出面板。 [

如何进行垂直部分？

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

Answer 1

检查一下：

<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

Answer 2

  <div class="row">
    <div class="col-md-8"> <!-- leftside -->
      <div class="row">
        <div class="col-md-12" style="background-color:blue;">table</div>
      </div>
      <div class="row">
        <div class="col-md-6" style="background-color:yellow;">panel1</div>
        <div class="col-md-6" style="background-color:green;">panel2</div>
      </div>
    </div>
    <div class="col-md-4" style="background-color:red;height:40px">rightside</div> <!-- rightside -->
  </div>

<hr>
<!-- code without bg-color -->

  <div class="row">
    <div class="col-md-8"> <!-- leftside -->
      <div class="row">
        <div class="col-md-12">table</div>
      </div>
      <div class="row">
        <div class="col-md-6">panel1</div>
        <div class="col-md-6">panel2</div>
      </div>
    </div>
    <div class="col-md-4" style="height:40px">rightside</div> <!-- rightside -->
  </div>

注意：确保您必须为“右侧”栏提供自定义高度。

Codepen：https://codepen.io/AnoNewb/pen/zjebGb

Bootstrap垂直网格

2 个答案: