Question

我是一个自助网站，但是当我希望这些面板像我的屏幕截图一样紧密相连。

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

我希望面板像绿色面板但是......我不明白。

尝试在一行中使用所有cols，但它不起作用。

Green is good, but i need the blue one up

这是我的源代码：

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

演示： http://plnkr.co/edit/VIzi52ziUDbm9vHuIfsk?p=preview

Bootstrap订购面板

1 个答案: