如何在我的情况下显示元素的填充？答案

【问题标题】：How to show padding of the elements in my case?如何在我的情况下显示元素的填充？
【发布时间】：2015-05-28 04:58:39
【问题描述】：

我在之前的帖子中提出了一个响应性问题。

我将我的 html 修复为有效的 html 代码，但在平板电脑视图中，我似乎不再有红色列左侧和灰色列右侧的填充。我想我确实有有效的引导类，但我不确定会发生什么。有人可以帮我解决这个问题吗？

我的 jsFiddle

<div class="container">
<div id="wrapper">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-xs-12 col-md-2">
             <div class="row">
                 <div class="col-xs-3 col-md-12 box1">
                    test
                 </div>
                 <div class="col-xs-9 col-md-12 box2">
                    test 2
                 </div>
             </div>
        </div>

        <div class="col-xs-12 col-md-2">
             <div class="row">
                 <div class="col-xs-3 col-md-12 box1">
                        test
                 </div>
                 <div class="col-xs-9 col-md-12 box2">
                    test 2
                 </div>
            </div>
        </div>

        <div class="col-xs-12 col-md-2">
             <div class="row">
                 <div class="col-xs-3 col-md-12 box1">
                    test
                 </div>
                 <div class="col-xs-9 col-md-12 box2">
                    test 2
                 </div>
            </div>
        </div>

        <div class="col-xs-12 col-md-2">
             <div class="row">
                 <div class="col-xs-3 col-md-12 box1">
                    test
                 </div>
                 <div class="col-xs-9 col-md-12 box2">
                    test 2
                 </div>
            </div>
        </div>

        <div class="col-xs-12 col-md-2">
             <div class="row">
                 <div class="col-xs-3 col-md-12 box1">
                    test
                 </div>
                 <div class="col-xs-9 col-md-12 box2">
                    test 2
                 </div>
            </div>
        </div>
    </div>
</div>
</div>

【问题讨论】：

如果这只是对您之前链接的问题的改进，您应该在那里更新您的问题，而不是提出新问题。
我不明白你想要达到什么目的。使用填充是解决此问题的错误方法。你应该调整你的 xs-x 值，否则它会降低响应式网格的有用性。请注意，Bootstrap 中的网格系统每行包含 12 个列。
是：jsfiddle.net/banzay52/qs3ph1oq/1 - 你想要什么？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

您的行有负边距：

.row {
margin-right: -15px;
margin-left: -15px;
}

如果您删除这些或将它们设置为 0，它将解决您的问题（其他都可以）；

fiddle

【讨论】：