Css 引导程序订购面板

我有一个bootstrap网站，但当我想让面板像我的截图上那样靠得很近时

如您所见，蓝色面板远离上面的面板

我希望面板是绿色的，但是。。。我不明白

尝试使用一行中的所有列，但不起作用

以下是我的源代码：

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

CSS框架





绿巨人









发电机















网站设计









独自创立








独自创立

---

只需将最后一个面板块放入第一个

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

CSS框架




独自创立

---

演示：

就是这样！非常感谢你的回答。