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

Posted 2023-03-06

【中文标题】Bootstrap 3 基于盒子的布局填充而不影响装订线

【英文标题】：Bootstrap 3 box based layout padding without effecting gutter

【发布时间】：2014-10-06 00:49:15

【问题描述】：

我正在制作一个基于盒子的布局，但我在 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/

【问题讨论】：

box-inner 的填充有什么问题？它们似乎在发挥它们的自然功能。

没关系，看看那里发生了什么......

我不确定它在那个例子中是否很明显，我会尝试让它更好地适应屏幕。但基本上红色框在这个更新的小提琴中，填充破坏了 30px 排水沟，我希望填充包含在它的盒子中并且不会以任何方式干扰排水沟：jsfiddle.net/kbj8dd0e/6

Bootstrap 的 col-md-6 大小似乎没有加载。

我应该去睡觉了，发个愚蠢的 cmets 对不起兄弟

【参考方案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> 实例，因为这只是添加标记并且没有任何用途。

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

【讨论】：

不幸的是，您的编辑使排水沟不均匀，这是我试图避免的。它们需要在顶部、底部、左侧和右侧保持相同的 30px 宽度，但允许在盒子内部进行填充，.box 类用于显示排水沟，所以我制作了一个盒子内部类来添加填充在盒子内，但它实际上使盒子更大而不是保持相同的大小。我会尝试将您链接到一个问题，该问题将帮助您更好地理解我对盒子类的推理：编辑，这是链接:)！ ***.com/questions/18071055/…

如果您希望下边距为 30px，那么只需将其设为 30px...jsfiddle.net/kbj8dd0e/7 仍然没有真正理解我认为的问题？

我为你添加了上面的链接:)！

哦，做到了！抱歉，缺乏理解，我花了很长时间解决一些激烈的问题，但我还是个新手。到达那里，但我有我的随机时刻。感谢您的帮助！

非常感谢，我整天都在研究如何做到这一点，因为我以前从未见过以如此盒装和定制的方式布置的设计，写了一个过于复杂的框架来制作盒子，意识到它过于复杂并报废了它，尝试了一些不够强大的自定义网格，终于找到了某个地方，但无法添加填充。哦，伙计，解决方案最终变得如此优雅。绝对完美。保重x