引导行之间的垂直空间

Question

因此，我正在进行布局工作，对于'响应性'我决定使用Bootstrap。现在我想我的网格系统出现问题。

的结果，我想是这样的：

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

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

但这种情况并未发生。发生了什么是我得到了盒1和盒2之间的不愉快的垂直空白，这一直持续到箱4月底在这里看到一个真实生活中的例子：

这是发生了什么。直到盒4.

这里的结局箱1和2米的跨度之间的空间是我的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％和升序排列。

.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>