Jquery 没有空间的垂直柱（连续柱）

我不希望在列中出现中断，而是希望连续列

我的代码是：

<div class="no-class" style="width: 100%; padding-top: 20px; padding-bottom: 55px;float:left">

            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />
                        image description<br />
                        description 2<br />
                    </div>
                </div>
            </div>



            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />                        
                    </div>
                </div>
            </div>

            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />                        
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />                        
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />                        
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />                        
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="padding:20px;">
                <div class="panel panel-info" style="width:100%;">
                    <div class="panel-heading" style="padding:0px">
                        <img class="no-class" style="width: 100%;" src="/2014060103422679450151db9-0851-4277-b59d-a23c34b7fa98.png"  alt="" />                        
                    </div>
                </div>
            </div>
</div>

图像描述

说明2

如果您想要没有空格的列，请删除代码

style="padding:20px;"

你提到的每一个div中都有这段代码

如果你想让柱板看起来是单条的，那么就用

style="margin-top:-1px;"

---

试试看。

在引导的网格列布局中，

class=“col-xs-3”

用于总共12列中的3列。您已使用

class=“col-xs-3”

添加了7个div。所以第一行有4列，第二行有3列。解决这个问题。你可以有六个div的

class=“col-xs-2”

，或者代码中有四个div的

class=“col-xs-3”

。

面包是什么意思？请解释问题，放一些图片等，或者创建一个小提琴。我不允许使用网络图像。。。。