Question

我不想要列中的Breaks，而是我想要连续的列......

我的代码是：

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

Answer 1

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

style="padding:20px;"

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

如果您希望列边框看起来是单条，则使用

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

试试吧。

Answer 2

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

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

2 个答案: