引导行之间的垂直间距

Question

所以我正在做一个布局，为了“响应”，我决定使用Bootstrap。现在我想我在网格系统上遇到了问题。

我想要的结果如下：

|-----------|       |---------------------------------|
|     1     |       |                                 | 
|-----------|       |                                 |
                    |                4                |
|-----------|       |                                 |
|     2     |       |                                 |
|-----------|       |---------------------------------|

|-----------|
|     3     |
|-----------|

但这并没有发生。发生的事情是，我在方框1和方框2之间出现了一个令人不快的垂直空格，一直持续到方框4的末尾。这里有一个真实的例子：

​

​

这就是发生的事情。长方体1和2之间的空间跨越到长方体4的末端。

这是我的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>

代码快速回顾：

我有一行，在该行中，有一个指向框1的col-md-4。在同一行中，有一个指向框4的col-md-8。在该行下面，有一个包含col-md-4的新行(框2)。

怎么修好这该死的地方？真的很烦人..。

谢谢。

(如果我写了一个模糊的问题，我很抱歉。我试着尽可能多地理解它)

Answer 1

为什么不将屏幕分成两列，.col-md-4和column 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>

​