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填充。这就是你要找的东西，对吧？

D2

在CSS中的列之间填充

1 个答案: