html - Bootstrap 行之间的垂直空间

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>

快速回顾代码:

我有一行，在那一行中，有一个 col-md-4 指向框 1。然后在同一行中，有一个 col-md-8 指向方框 4。在该行下，有一个新行，其中包含一个 col-md-4(方框 2)。

如何修复该死的空间？真的很烦人...

谢谢。

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

Answer 1

为什么不把屏幕分成两栏，.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>