Pionowa przestrzeń między wierszami startowymi

Question

Pracuję więc nad układem, a dla "responsywności" zdecydowałem się użyć Bootstrapa. Teraz mam problem z systemem gridowym, jak sądzę.

wskutek czego chcę jest następująca:

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

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

Ale tak się nie stało. Co się stało jest to, że mam nieprzyjemny pionowe odstępy między polu 1 oraz w rubryce 2, która trwa do końca pudełka 4. Zobacz prawdziwy przykład życia tutaj:

to co się dzieje. Przestrzeń pomiędzy pola 1 i 2 przęseł do zakończenia polu 4.

Tu jest mój 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> 

Szybkie podsumowanie kodu:

Mam wiersz, w tym wierszu, tam a col-md-4, która wskazuje na pole 1. Następnie w tym samym wierszu znajduje się col-md-8, który wskazuje pole 4. W tym wierszu znajduje się nowy wiersz zawierający col-md-4 (ramka 2).

Jak naprawić tę cholerną przestrzeń? To naprawdę denerwujące ...

Dzięki.

(Przepraszam jeśli napisałem niejasne pytanie. Starałem się zrobić jak najwięcej sensu z niego jak to możliwe)

Answer 1

Dlaczego nie podzielić ekran na dwie kolumny, .col-MD-4 i col-md-8, i umieścić zawartość pola 1, 2 i 3 w lewej kolumnie? Jeden ekran mniejszy niż md spowodowałby, że pudełka byłyby w 100% z .container i w porządku rosnącym.

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