引導行之間的垂直空間

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>