Загрузочные панели Bootstrap

Question

У меня есть сайт начальной загрузки, но когда я хочу, чтобы панели были близко друг к другу, как на моем снимке экрана.

Как вы можете видеть, синяя панель находится далеко от панели выше.

Я хочу, чтобы панель была похожа на зеленую, но ... я не понимаю.

Пытался использовать все cols в одной строке, но он не работает.

Вот мой исходный код:

<div class="container"> 
<div class="row"> 
    <div class="col-md-3 col-sm-4"> 
     <div class="panel panel-main"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">CSS Frameworks</h3> 
      </div> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
        <li><a href="">Bootstrap</a></li> 
        <li><a href="">Foundation</a></li> 
        <li><a href="">Skeleton</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-4"> 
     <div class="panel panel-main"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Hulp bij programmeren</h3> 
      </div> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
        <li><a href="">Stackoverflow</a></li> 
        <li><a href="">W3Schools</a></li> 
        <li><a href="http://www.phptuts.nl">PHPTuts.nl</a></li> 
        <li><a href="">Codeschool</a></li> 
        <li><a href="">Lynda</a></li> 
        <li><a href="">Treehouse</a></li> 
        <li><a href="https://css-tricks.com/">CSS-Tricks</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-4"> 
     <div class="panel panel-main"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Generators</h3> 
      </div> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
        <li><a href="https://coveloping.com/tools/border-radius-generator">Border radius generator</a></li> 
        <li><a href="https://coveloping.com/tools/css-animation-generator">CSS Animation generator</a></li> 
        <li><a href="https://coveloping.com/tools/css-box-shadow-generator">CSS Box shadow generator</a></li> 
        <li><a href="https://coveloping.com/tools/css-button-generator">CSS button generator</a></li> 
        <li><a href="https://coveloping.com/tools/css-filter-generator">CSS filter generator</a></li> 
        <li><a href="https://coveloping.com/tools/text-shadow-generator">CSS text shadow generator</a></li> 
        <li><a href="https://coveloping.com/tools/css-shapes-generator">CSS shapes generator</a></li> 
        <li><a href="https://coveloping.com/tools/google-maps-generator">Google maps generator</a></li> 
        <li><a href="https://coveloping.com/tools/hash-generator">Hash generator</a></li> 
        <li><a href="https://coveloping.com/tools/html5-responsive-form-generator">HTML5 responsive form generator</a></li> 
        <li><a href="https://coveloping.com/tools/meta-tag-generator">Meta tag generator</a></li> 
        <li><a href="https://coveloping.com/tools/pricing-tables">Pricing table generator</a></li> 
        <li><a href="https://coveloping.com/tools/qr-code-generator">QR Code generator</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-4"> 
     <div class="panel panel-main"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Webdesign</h3> 
      </div> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
        <li><a href="http://flatuicolors.com/">Flat UI Colors</a></li> 
        <li><a href="https://coveloping.com/tools/colour-shades-generator">Color shades generator</a></li> 
        <li><a href="http://www.freeimages.com/">Freeimages</a></li> 
        <li><a href="http://dribbble.com/">Dribbble</a></li> 
        <li><a href="https://www.behance.net/">Behance</a></li> 
        <li><a href="http://line25.com/">Line25</a></li> 
        <li><a href="https://css-tricks.com/">CSS-Tricks</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 


    <div class="col-md-3 col-sm-4"> 
     <div class="panel panel-main"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Bootstrap</h3> 
      </div> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
        <li><a href="http://getbootstrap.com/getting-started/" target="blank">Download bootstrap</a></li> 
        <li><a href="http://getbootstrap.com/customize/" target="blank">Customize and download</a></li> 
        <li><a href="http://getbootstrap.com/css/" target="blank">CSS</a></li> 
        <li><a href="http://getbootstrap.com/components/" target="blank">Components</a></li> 
        <li><a href="http://getbootstrap.com/javascript/" target="blank">JavaScript</a></li> 
        <li><a href="http://www.w3schools.com/bootstrap/" target="blank">Bootstrap W3schools</a></li> 

       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-4"> 
     <div class="panel panel-main"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Bootstrap</h3> 
      </div> 
      <div class="panel-body"> 
       <ul class="list-unstyled"> 
        <li><a href="http://getbootstrap.com/getting-started/" target="blank">Download bootstrap</a></li> 
        <li><a href="http://getbootstrap.com/customize/" target="blank">Customize and download</a></li> 
        <li><a href="http://getbootstrap.com/css/" target="blank">CSS</a></li> 
        <li><a href="http://getbootstrap.com/components/" target="blank">Components</a></li> 
        <li><a href="http://getbootstrap.com/javascript/" target="blank">JavaScript</a></li> 
        <li><a href="http://www.w3schools.com/bootstrap/" target="blank">Bootstrap W3schools</a></li> 

       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Просто поместите блок последнюю панель в первый .col-md-3.col-sm-4:

<div class="col-md-3 col-sm-4"> 
    <div class="panel panel-main"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">CSS Frameworks</h3> 
     </div> 
     <div class="panel-body"> 
      <ul class="list-unstyled"> 
       <li> 
        <a href="">Bootstrap</a> 
       </li> 
       <!-- ... --> 
      </ul> 
     </div> 
    </div> 

    <div class="panel panel-main"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Bootstrap</h3> 
     </div> 
     <div class="panel-body"> 
      <ul class="list-unstyled"> 
       <li> 
        <a href="http://getbootstrap.com/getting-started/" target="blank">Download bootstrap</a> 
       </li> 
       <!-- ... --> 
      </ul> 
     </div> 
    </div> 
</div> 

Demo:http://plnkr.co/edit/VIzi52ziUDbm9vHuIfsk?p=preview