Html 引导行之间的垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28364307/
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
Vertical space between bootstrap rows
提问by Exotical
So I'm working on a layout, and for 'responsiveness' I decided to use Bootstrap. Now I'm having a problem with the grid system I guess.
所以我正在研究布局，为了“响应性”，我决定使用 Bootstrap。现在我想我的网格系统有问题。
The result that I want is the following:
我想要的结果如下：
|-----------| |---------------------------------|
| 1 | | |
|-----------| | |
| 4 |
|-----------| | |
| 2 | | |
|-----------| |---------------------------------|
|-----------|
| 3 |
|-----------|
But that didn't happen. What happend is that I got an unpleasant vertical whitespace between box 1 and box 2, which lasts until the end of box 4. See a real life example here:
但这并没有发生。发生的事情是我在框 1 和框 2 之间有一个令人不快的垂直空白，它一直持续到框 4 的结尾。请在此处查看真实示例：
That's what happens. The space between box 1 and 2 spans until the ending of box 4.
这就是发生的事情。框 1 和框 2 之间的空间一直延伸到框 4 的结尾。
Here's my HTML:
这是我的 HTML：
<div class="row">
<div class="col-md-4 nopadding leftnews">
<div id="radio">
<audio id="radio-audio" controls="" autoeplay="" preload="none">
<source src="#" type="audio/mpeg">
</audio>
<div id="stats" style="background-image: url('assets/img/test.png');">
<span class="dj-name">*****</span>
<span class="listeners">30</span>
<span class="song"><marquee id="song">Katy Perry - Thinking Of You (Acoustic Version)</marquee></span>
</div>
<div id="player">
<div class="volume">
<input name="volume-control" id="volume-control" type="range" min="0" max="99" value="100" step="1" onchange="volumeUpdate(value)">
</div>
<img id="audio-update" src="assets/img/radio_update.png" alt="">
<div id="audio-play" class="radio-control"></div>
<div id="audio-pause" class="radio-control"></div>
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="panel panel-default panel_big">
<div class="panel_top_orange"></div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 nopadding">
<div class="panel panel-default panelsmall">
<div class="top_rooster">
<span>Rooster</span>
</div>
<div class="panel-body">
<div id="rooster">
<table style="width:265px;">
<tr class="current" title="11:00 - 13:00" data-toggle='tooltip'>
<td>
<img src="assets/img/test.png" style="position: relative; top:-5px;" />
</td>
<td class="nu"><b>NU</b>: </td>
<td> </td>
<td class="djnu"> ****</td>
</tr>
<tr title="12:00 - 13:00" data-toggle='tooltip'>
<td>
<img src="assets/img/test.png" style="position: relative; top:-5px;" />
</td>
<td class="nu">HIERNA: </td>
<td> </td>
<td class="dj"> ****</td>
</tr>
<tr title="13:00 - 14:00" data-toggle='tooltip'>
<td >
<img src="assets/img/test.png" style="position: relative; top:-5px;" />
</td>
<td class="nu">STRAKS: </td>
<td> </td>
<td class="dj"> ****</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Quick recap of the code:
代码快速回顾：
I have a row, in that row, there's a col-md-4which points to box 1. Then in the same row, there's a col-md-8which points to box 4.
Under that row, there's a new row which contains a col-md-4(Box 2).
我有一行，在该行中，有一个col-md-4指向框 1。然后在同一行中，有一个col-md-8指向框 4。在该行下，有一个包含col-md-4(框 2)的新行。
How the fix the damn' space? It's really annoying...
如何修复该死的空间？真的很烦...
Thanks.
谢谢。
(I'm sorry if I wrote a vague question. I tried to make as much sense of it as possible)
（如果我写了一个模糊的问题，我很抱歉。我试图尽可能地理解它）
采纳答案by ckuijjer
Why don't you divide the screen into two columns, .col-md-4 and col-md-8, and put the contents of box 1, 2 and 3 into the left column? One screens smaller than mdthis would make the boxes 100% of the .containerand in ascending order.
你为什么不把屏幕分成两列，.col-md-4和col-md-8，把框1、2、3的内容放到左边一列？比md这更小的屏幕将使框 100% 的.container和 按升序排列。
.box {
border: 1px solid #c66;
background-color: #f99;
margin-bottom: 15px;
height: 100px;
line-height: 100px;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 48px;
text-align: center;
}
.box--high {
height: 250px;
line-height: 250px;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="col-md-8">
<div class="box box--high">4</div>
</div>
</div>
</div>