如何在我的情况下显示元素的填充?

时间:2014-12-07 22:57:59

标签: html css twitter-bootstrap responsive-design

我在上一篇文章中提出了一个回应性问题。

How to set responsive divs in my case?

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

我的jsFiddle

http://jsfiddle.net/0qarh5yt/6/

<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>

1 个答案:

答案 0 :(得分:-1)

您在行上有负边距:

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

如果您删除这些或将它们设置为0,它将解决您的问题 (其他一切都还可以);

<强> fiddle