logo标签列表

Bootstrap垂直网格

twitter-bootstrapgrid
7
我有一个关于如何在Bootstrap的网格系统中垂直放置内容的问题。 这是我想做的： 首先，屏幕应水平分为两部分，左边8，右边4。 然后，左侧再次垂直分割，在顶部将放置一个表格。 在底部，再次水平分为2个部分，在每个部分中都会显示一个面板。 如何实现垂直部分？ 
<div class="row">
   <div class="col-md-8" id="leftside">
      ?
      ?
      ?
   </div>
   <div class="col-md-4" id="rightside">
      ...
   </div>
2个回答
9

请看以下内容：

<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

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>

注意：确保你需要为“rightside”列指定自定义高度。
Codepen: https://codepen.io/AnoNewb/pen/zjebGb
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接