css - 在 CSS 中的列之间填充

Question

我想知道是否有更好的解决方案来解决这段代码中前两列之间的空间问题:https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf

我确实尝试将 div 放在 div 中，但在第一个示例中 div 的宽度减小了(在顶部)。在底部它工作正常，但我必须以 px 为单位定义一个填充值，我不喜欢它，因为它是一个固定值，我不知道这个空间是否应该自动改变。

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-8">

                    <div class="col-md-12">
                        <div class="col-md-4">
                            <div class="col-md-12 well text-center">
                                ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="col-md-12 well text-center">
                                ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                            </div>
                        </div>

                    </div>

                    <div class="col-md-12 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

            </div>

            <div class="col-md-4">

                    <div class="col-md-12 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

                    <div class="col-md-12 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

            </div>

        </div>
    </div>
</div>



<hr>
Bellow is OK.
<hr>


<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-8">

                    <div class="col-md-4 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

                    <div class="col-md-8" style="padding: 0 0px 0 30px;">
                        <div class="col-md-12 well text-center">
                            ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>
                    </div>

                    <div class="col-md-12 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

            </div>

            <div class="col-md-4">

                    <div class="col-md-12 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

                    <div class="col-md-12 well text-center">
                        ...<br>...<br>...<br>...<br>...<br>...<br>...
                    </div>

            </div>

        </div>
    </div>
</div>

谢谢!

Answer 1

容器的间距为 30px(左右各 15px) 如果你移除容器并给它一行。它会在两边给出 -15px 的填充。这就是您要找的，对吧？

<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-4">
                <div class="col-md-12 well text-center">
                    ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                </div>
            </div>
            <div class="col-md-8">
                <div class="col-md-12 well text-center">
                    ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
                </div>
            </div>
        </div>
        <div class="col-md-12 well text-center">
            ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
        </div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12 well text-center">
            ...<br>...<br>...<br>...<br>...<br>...<br>...
        </div>
        <div class="col-md-12 well text-center">
            ...<br>...<br>...<br>...<br>...<br>...<br>...
        </div>
    </div>
</div>