没有空格的垂直列（连续列）答案

【问题标题】：vertical columns without space (Continuous columns)没有空格的垂直列（连续列）
【发布时间】：2014-07-22 03:08:31
【问题描述】：

我不想在列中出现中断，而是想要连续的列...

我的代码是：

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

【问题讨论】：

面包是什么意思？
请解释问题，放一些图片等或创建一个小提琴jsfiddle.net
图片不允许我使用....
pixentral.com/hosted/1Dz8c01DBc1VESmFHCHtQ6PZP1_thumb.png

标签： jquery html css twitter-bootstrap asp.net-mvc-5

【解决方案1】：

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

style="padding:20px;"

来自您提到此代码的每个 div。

如果您希望栏边框看起来是单栏，请使用

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

试试看。

【讨论】：

【解决方案2】：

在引导程序的网格列布局中，class="col-xs-3" 用于 3 列，共 12 列。您添加了 7 个 div 和 class="col-xs-3"。所以您将在第一行获得 4 列，在第二行获得 3 列。要解决这个问题。您可以在代码中使用带有 6 个 div 的 class="col-xs-2" 或带有 4 个 div 的 class="col-xs-3"。

【讨论】：