Question

当我将浏览器窗口的大小调整为768 px以下时，这些框在我的列框的侧面得到了不同的填充：See the example here。

我试图用这种方式设置媒体查询，但是我知道这根本不是正确的方法：

@media only screen and (max-width: 768px) {
    .small-padding-left {
            padding-left: 7.5px;
        }

    .col-sm-8 {
        padding-right: 7.5px;
    }

}

有人知道我能做到这一点的好方法吗？到目前为止，这是我的代码：

/* Global CSS*/
    .row > div{
        margin-bottom: 15px;
    }
    .content{
        background: #b4bac0;
        min-height: 300px;
    }
    /* When there is 2 columns on top of eachother */
    .sidebar{
        background: #b4bac0;
        min-height: 300px;
    }
    .sidebar-top{
        min-height: 140px;
        background: #dbdfe7;
    }
    .sidebar-bottom{
        min-height: 145px;
        background: #7e8aa0;
        margin-bottom: -15px;
    }
    /* Padding used for the core CSS */
    .small-padding.top {
       padding-top:5px;
    }

    .small-padding.bottom {
        padding-bottom:5px;
    } 
    .small-padding.left {
        padding-left:7.5px;
    }

    .small-padding.right {
        padding-right:7.5px;
    }
    /* Media quries */
    @media only screen and (max-width: 768px) {
        .small-padding-left {
                padding-left: 7.5px;
            }

        .col-sm-8 {
            padding-right: 7.5px;
        }

    }

<body style="background-color: #4940fb;">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 small-padding right">
                <div class="content"></div>
            </div>
            <div class="col-sm-8 small-padding left">
                <div class="content"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-7 small-padding right">
                <div class="content"></div>
            </div>
            <div class="col-sm-5">
                <div class="row">
                    <div class="col-sm-12 small-padding left">
                        <div class="sidebar-top"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 small-padding left">
                        <div class="sidebar-bottom"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

您需要添加一些自定义CSS，以使其正常工作。尝试将此代码添加到您的CSS文件中。

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

.row>[class*="col-"] {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

Answer 2

在您的示例中，问题发生在575宽度以下。

请更新您的CSS文件中的媒体查询

@media only screen and (max-width: 575px) {
.small-padding.right
{
padding-right: 15px;
}
.small-padding.left
{
padding-left: 15px;

}
}

媒体查询的两边相同

2 个答案: