twitter-bootstrap Bootstrap 垂直网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33166310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap vertical grid
提问by yangsunny
I have a question about how to put stuff vertical in a grid system with bootstrap.
Here is what I'm trying to do:
first, the screen should be devided in two part horinzontally, left part 8, right part 4.
then, the left part should be devided again vertically, on the top side there will be a table in it.
on the bottom part, again devided in 2 horizontally ane in each part a panel will be shown.
[![1]](/static/img/viewimg.png)
我有一个关于如何使用引导程序在网格系统中垂直放置东西的问题。这是我想要做的：首先，屏幕应水平分为两部分，左部分 8，右部分 4。然后，左侧部分应再次垂直划分，顶部将有一张桌子在里面。在底部，再次分为 2 个水平区域，每个部分将显示一个面板。[
How do I do the vertical part?
我如何做垂直部分？
<div class="row">
<div class="col-md-8" id="leftside">
?
?
?
</div>
<div class="col-md-4" id="rightside">
...
</div>
回答by Ubiquitous Developers
Check this:
检查这个：
<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
代码笔：http://codepen.io/anon/pen/dYVxGa
回答by anoNewb
<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>
Note: Make sure that you will have to give custom height to "rightside" column.
注意：确保您必须为“右侧”列提供自定义高度。
Codepen: https://codepen.io/AnoNewb/pen/zjebGb
代码笔：https://codepen.io/AnoNewb/pen/zjebGb
