Bootstrap 3 基于盒子的布局填充而不影响装订线

Question

我正在制作一个基于盒子的布局，但我在 bootstrap 3 中遇到了排水沟问题。由于自 bootstrap 2 以来它们已被更改为填充，每次我想向盒子添加填充时，它都会完全破坏排水沟。我似乎找不到解决问题的方法。

我使用一个 .box 类从它的排水沟中突出显示盒子，并为它们提供背景颜色和图像。我想在文本框内填充，所以它不在框壁的边缘，所以我创建了一个 .box-inner 类，但我不能只对其应用填充：/

<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <div class="box">
                <div class="box-inner">
                    <h1>Test2</h1>
                </div>
            </div>
        </div>
    </div>
</div>

任何帮助将不胜感激！我已经用头撞墙了好几个小时了。

Fiddle 在这里，我用评论强调了问题区域： http://jsfiddle.net/kbj8dd0e/6/

Answer 1

当然可以添加填充。只需将其添加到.box。

看看这个：
http://jsfiddle.net/kbj8dd0e/5/
（请注意，我将 col-md 更改为 col-xs 以使其在那个小小提琴窗格中显示得更好，但同样应该工作对于任何col 类。）

我所做的只是将填充移动到.box 类，以便能够删除多余的.box-inner。我还删除了您的所有 <div class="row"><div class="col-md-12">...</div></div> 实例，因为这只是添加标记并且没有任何用途。

或者我在这里遗漏了什么？