css - 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 here，我用评论突出了问题区域: http://jsfiddle.net/kbj8dd0e/6/

Answer 1

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

看看这个:
http://jsfiddle.net/kbj8dd0e/5/
(请注意，我将 col-md 更改为 col-xs 以使其在那个 fiddle Pane 中显示得更好，但这同样适用于任何 col 类。)

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

还是我在这里遗漏了什么？